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;
                width:800px;

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

}
#topnav li:hover ul

Answer 2

您可以添加或更改您的CSS

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

或

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

Answer 3

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

尝试使用：

#topnav li ul {padding: 0px;}

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

下拉菜单继续向右跳

3 个答案: