Выпадающее меню продолжает прыгать вправо

Question

Некоторые из того, как мое выпадающее меню продолжает прыгать вправо, вместо того чтобы спускаться прямо под его родителем.
Я пробовал позиционировать его, но это не сработает, так как позиция изменяется, когда изменение в браузере меняет размер.

Как получить мое выпадающее меню, центрированное под родителем?

Html:

<div id="topnav"> 
    <ul> 
     <li><a href="contact.html">CONTACT</a></li> 
     <li><a href="blog.html">BLOG</a></li> 
     <li><a href="over ons.html">OVER ONS</a></li> 
     <li><a href="gedragsbeinvloeding.html">GEDRAGSBEINVLOEDING</a></li> 
     <li><a href="onze diensten.html">ONZE DIENSTEN</a> 
      <ul> 
       <li class="topmargin"><a href="onderzoek.html">ONDERZOEK</a></li> 
       <li><a href="advies.html">ADVIES</a></li> 
       <li><a href="lezingen.html">LEZINGEN</a></li> 
      </ul>      
     </li> 
     <li><a href="index.html">HOME</a></li> 
    </ul> 
</div> 

</div> 

CSS:

#topnav  { z-index:3; 
       padding-top:76px; } 

#topnav ul li { list-style-type:none; 
       display:inline; 
       float:right; 
       } 


#topnav ul li a { font-family:Arial, Helvetica, sans-serif; 
       font-size:13px; 
       font-weight:bold; 
       text-decoration:none; 
       padding-left:15px; 
       } 

#topnav ul li a:link { color:#00aeef; } 
#topnav ul li a:visited { color:#00aeef; } 
#topnav ul li a:active { color:#f26532; } 
#topnav ul li a:hover { color:#f26532; } 
#topnav ul li a:focus { color:#f26532; } 

#topnav li ul  { position:absolute; 
        left:-999em; 
        list-style-type:none; 
        } 

#topnav li ul li  { border-top:0px; 
        clear:both;} 

#topnav li:hover ul  { left:auto; } 

#topnav li:hover ul li { float:none; 
        display:block; 
        width:100%; 
        } 

#topnav ul li ul li  { text-align:center; 
        padding:10px 12px 10px 0px; 
        border-top:#FFF solid; 
        background-color:#00aeef; 
        width:120px; 
        } 

.topmargin   { margin-top:5px; } 

#topnav li ul li a  { font-family:Arial, Helvetica, sans-serif; 
        font-size:13px; 
        font-weight:bold; 
        text-decoration:none; 
        padding-left:14px; 
        } 

#topnav li ul li a:link { color:#FFF; } 
#topnav li ul li a:visited { color:#FFF; } 
#topnav li ul li a:active { color:#FFF; } 
#topnav li ul li a:hover { color:#f26532; } 
#topnav li ul li a:focus { color:#FFF; } 

Answer 1

Вы можете добавить это или изменить ваш CSS

#topnav li:hover ul { 
left: auto; 
margin-left: -30px; 
} 

или

#topnav li ul { 
left: auto; 
list-style-type: none; 
position: absolute; 
padding: 0px; 
} 

Answer 2

У вашего вложенного тега ul, кажется, есть лишнее дополнение, применяемое таблицей стилей пользователя-агента.

Попробуйте использовать:

#topnav li ul {padding: 0px;} 

Таким образом, будет затронута прокладка только вложенной ul элемента.

Answer 3

Изменить #topnav идентификатор для этого

#topnav{
z-index:3;
padding-top:76px;
width:800px;

and add the folling id
#topnav ul{
float:left;
}

#topnav li:hover ul
{left:80px;}