下拉菜單不斷跳到右邊

一些如何我的下拉菜單不斷跳到右邊，而不是下降到它的父母下面。
我已經嘗試過定位它，但那不起作用，因爲瀏覽器窗口更改大小時位置發生變化。下拉菜單不斷跳到右邊

如何讓我的下拉菜單居於父母下方？

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; }

來源

2013-12-09 fee

您可以在此添加或更改你的CSS

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

或

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

來源

2013-12-09 09:57:03 Marinus

這做到了（保證金之一），謝謝你這麼多，你快幫忙！ – fee

嵌套的ul標籤似乎有一些不必要的填充由用戶代理樣式表應用。

嘗試使用：

#topnav li ul {padding: 0px;}

這種方式僅嵌套ul元素的填充會受到影響。

來源

2013-12-09 10:02:27

變化#topnav ID這個

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

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

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

來源

2013-12-09 10:18:16

下拉菜單不斷跳到右邊

回答

相關問題