CSS下拉菜单在悬停时将滚动条添加到标题div

debugcn 发表于 Dev

德鲁斯马克

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

我曾尝试增加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垂下并超出内容主体的其余部分？谢谢，感谢您的帮助。

jmore009

您需要删除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;
}

小提琴

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。