下拉菜单一直向右跳答案

【问题标题】：Drop down menu keeps jumping to the right下拉菜单一直向右跳
【发布时间】：2013-12-26 09:08:58
【问题描述】：

我的下拉菜单如何一直向右跳，而不是在其父级下方下拉。
我试过定位它，但这不起作用，因为当浏览器窗口改变大小时位置也会改变。

如何让我的下拉菜单在父级下方居中？

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

【问题讨论】：

标签： html css drop-down-menu center centering

【解决方案1】：

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

【讨论】：

【解决方案2】：

您可以添加或更改您的 css

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

或

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

【讨论】：

做到了（页边空白），非常感谢您的快速帮助！

【解决方案3】：

您的嵌套 ul 标记似乎有一些用户代理样式表应用的不必要的填充。

尝试使用：

#topnav li ul {padding: 0px;}

这样只会影响嵌套的ul 元素的填充。

【讨论】：