Question

我使用以下example尝试创建自己的下拉菜单。

我已经尝试过增加z-index但我的问题实际上不是子菜单落后于其他内容。而当我将鼠标悬停在“登录”上时，滚动条会添加到标题div ，我必须使用它们来查看子菜单。

<!DOCTYPE html> 
<html>  
<head>                                                                                                    
<title>Test</title>                                                                               
<link rel="stylesheet" type="text/css" href="test.css">                                           
</head> 
<body>  
<div id="header">
<div id="logo"> 
[ BETA ]
</div>  

<div id="menu_container">                                                                                 
<div id="menu">                                                                                           
    <ul>
    <li><a href=#>Login</a>                                                                           
            <ul>                                                                                      
            <li><a href=#>A</a></li>                                                                  
            <li><a href=#>B</a></li>                                                                  
            <li><a href=#>C</a></li>                                                                  
            </ul>                                                                                     
    </li>
    <li><a href=#>Register</a></li>                                                                   
    <li><a href=#>Events</a></li>                                                                     
    <li><a href=#>About</a></li>                                                                      
    </ul>
</div>  
</div>                                                                                                    
</div>                                                                                                    
</body>
</html>

和

#header {
    background: black;
    color: white;
    padding: 10px 10px 10px 10px;
    overflow: auto;
    position: relative;
    z-index: 999;
}

#logo {
    float: left;
    color: #ff8100;
}

#menu_container {
    float: right;
}

#menu ul {
    list-style: none;
    position: relative;
    float: left;
    margin: 0;
    padding: 0;
    z-index: 999;
}

#menu ul a {
    display: block;
    text-decoration: none;
}

#menu ul li {
    position: relative;
    float: left;
    margin: 0;
    padding: 0;
}

#menu ul li.current-menu-item {
    background: #000000;
}

#menu ul li:hover {
    background: green;
}

#menu ul ul {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background:#ffffff;
    padding: 0;
}

#menu ul ul li {
    float: none;
    width:200px;
}

#menu ul ul a {
    line-height: 120%;
    padding: 10px 15px;
}

#menu ul ul ul {
    top: 0;
    left: 100%;
}

#menu ul li:hover > ul {
    display: block;
}

我需要做些什么才能让子菜单从标题div和其他内容正文中垂下来？谢谢，感谢您的帮助。

Answer 1

您需要从overflow: auto删除.header并改为使用clearfix：

#header {
   background: black;
   color: white;
   padding: 10px 10px 10px 10px;
   /*overflow: auto;*/ //remove
   position: relative;
   z-index: 999;
}

#header:after{
   content: "";
   display: block;
   clear: both;
}

FIDDLE

正在添加

overflow:auto以清除浮动的项目（我更喜欢overflow:hidden），但它的作用是隐藏溢出并添加滚动条以查看更多内容。通常这是一个很好的方法，除非在这种情况下你真的希望subnav溢出标题。

Answer 2

将此添加到您的代码中：

#header {
    overflow: hidden;
}

那个oughta'做的伎俩。简单干净。

CSS下拉菜单在悬停时向滚动条添加滚动条

2 个答案: