Выпадающее меню смещено вправо

Question

У меня есть выпадающее меню, которое хорошо работает, за исключением одной незначительной ошибки, которую я не могу решить.

Первый выпадающий пункт меню отображается нормально. Однако второй выпадающий пункт меню слегка сдвинут вправо. Я предполагаю, что правая маржа, которую я установил для ссылки, заставила выпадающее меню слегка сдвинуться вправо. Если это так, что я могу сделать, чтобы решить проблему?

Это простое навигационное меню, которое устанавливает положение элемента dropmenu в абсолютное и скрыто от переполнения родительского элемента: скрытая функция. При наведении курсора выпадающее меню отображается с переполнением: видимым.

Живой сайт здесь ->nav menu

CSS

#mainMenu { 
    position: relative; 
} 

#mainMenu ul { 
    list-style: none; 
    float: right; 
    background-color: #FFFFFF; 
} 

#mainMenu ul li { 
    position: relative; 
    display: inline; 
    float: left; 
    /*padding-right: 1.5em;*/ 
    font-size: 1.2em; 
    zoom:1; 
    overflow: hidden; 
} 

#mainMenu>ul>li { 
    line-height: 2em; 
} 

#mainMenu ul li:hover { 
    overflow: visible; 
} 

#mainMenu ul li a { 
    float: left; 
    text-decoration: none; 
    color: black; 
    padding: 0 1em; 
} 

#mainMenu>ul>li:last-child a { 
    padding:0.4em 1em 0.4em 1em; 
    border-radius:4px; 
    background-color: #00b200; 
    color: #FFFFFF; 
} 

#mainMenu ul li a:hover{ 
    text-decoration: none; 
    color: rgb(42, 160, 239); 
} 

#mainMenu ul ul{ 
    position: absolute; 
    top: 2em; 
    left: 60%; 
    width: 10em; 
    margin-left: -3em; 
    height: auto; 
    border: solid #CCC; 
    border-width: 0 1px 1px; 
} 

#mainMenu ul ul:first-child{ 
    padding-top: 2em; 
} 

#mainMenu ul ul li, 
#mainMenu ul ul a { 
    display:block; 
    float:none; 
    border:0; 
    box-shadow:none; 
    text-align:center; 
    font-size: 1em; 
    padding: 0.4em; 
    text-align: left; 
} 

#mainMenu ul ul li:first-child { 
    border-top:1px solid rgb(72, 147, 196); 
} 

#mainMenu ul ul li { 
    border-top: 1px solid #e9e9e9; 
} 

#mainMenu a:active, 
#mainMenu a:focus, 
#mainMenu a:hover { 
    background:#F2F6FA; 
    color:#333; 
} 

HTML

<div id="nav-row"> 
      <h1> 
       <a href="\"> 
        Corporate Site 
        <span></span> 
       </a> 
      </h1> 

      <div id="mainMenu"> 
       <a href="#mainMenu" class="showMenu"></a> 
       <a href="#" class="hideMenu"></a> 

      <ul> 
       <li><a href="About">About</a> 
        <ul> 
         <li class="company"><a href="#">Company Profile</a></li><li class="team"> 
         <a href="#">The Team</a></li><li class="linsux"> 
         <a href="#">Pricing Packages</a></li> 
        </ul></li> 
       <li><a href="Services">Services</a> 
        <ul> 
         <li class="webDesign"><a href="#">Websites</a></li><li class="Emails"> 
         <a href="#">Landing Pages</a></li><li class="Logos"> 
         <a href="#">Logos</a></li> 
        </ul></li> 
       </li> 
       <li><a href="Case Studies">Case Studies</a></li><li> 
       <a href="Blog">Blog</a></li><li> 
       <a href="Contact">Contact</a></li><li> 
       <a href="Free Web Analysis">Free Web Analysis</a></li> 
      </ul> 
      </div> 
     </div> 

Answer 1

Это потому, что вы используете для отступа подменю % родительской ширины, которая не является тем же самым , margin-left: -3em - постоянная.

Использование, например:

left: -10px; /* I see the first submenu cca. 10px before the parent LI */ 
margin-left: 0; 

Не знаю, почему ты отступа от 60% и переход подменю обратно с помощью -3em.

Answer 2

попробуйте следующее:

#mainMenu ul ul { 
    left: 39% !important; 
} 

Или

#mainMenu ul ul { 
    left: 0; 
    margin-left: 0; 
}