html - 下拉菜单一直向右跳

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

将#topnav id 改成这个

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

并添加以下id
#topnav ul{
float :左；
}

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