问题是当显示下拉菜单时，我的下拉菜单的子菜单没有出现在其容器元素之外。 在代码中，我有主菜单和子菜单项。主菜单项是:HOME、ABOUT、SERVICES、PRODUCTS 和 CONTACT。每个主菜单项的子菜单项是:A、B、C、D 和 E。我希望子菜单项出现在每个主菜单项的下方。只有当我增加主菜单项的填充时，子菜单项才会出现，以便主菜单容器位于子菜单项的背景中。它们不会以其他方式出现。这是我的代码:
.menu{
width: 100%;
background: #d80000;
float: left;
margin-bottom: 50px;
display: block;
overflow: hidden;
padding: 10px 10px;
}
.menu .mainmenu{
margin-left: -40px;
/*display: none;*/
}
.menu .mainmenu .heading{
float: left;
list-style: none;
margin-right: 1px;
}
.menu .mainmenu .heading a{
background: #fff;
padding: 8px 100px;
text-decoration: none;
color: #d80000;
text-transform: uppercase;
font-weight: bold;
font-family: verdana;
font-size: 14px;
}
.menu .mainmenu .heading a:hover{
background: #d80000;
color: #fff;
}
.menu:hover .mainmenu{
display: block;
}
.heading{
position: relative;
}
.submenu{
display: none;
background: #d80000;
list-style: none;
padding: 10px 50px;
margin-left: -40px;
}
.submenu .items{
display: block;
}
.submenu .items a{
text-decoration: none;
}
.heading:hover .submenu{
display: block;
}
.submenu .items a:hover{
background: #d80000;
color: #fff;
display: block;
}
li:hover ul
{
display: block;
position: absolute;
}
li:hover li
{
float: none;
font-size: 11px;
}
li:hover a
{
background: #d80000;
}
li:hover li a:hover
{
background: #d80000;
}
ul li a:hover
{
background: #d80000;
}<html>
<head>
<title>Menu</title>
<link rel="stylesheet" type="text/css" href="style1.css">
</head>
<body>
<div class="menu">
<ul class="mainmenu">
<li class="heading"><a href="#">Home</a>
<ul class="submenu">
<li class="items"><a href=#">A</a></li>
<li class="items"><a href=#">B</a></li>
<li class="items"><a href=#">C</a></li>
<li class="items"><a href=#">D</a></li>
<li class="items"><a href=#">E</a></li>
</ul>
</li>
<li class="heading"><a href="#">About</a>
<ul class="submenu">
<li class="items"><a href=#">A</a></li>
<li class="items"><a href=#">B</a></li>
<li class="items"><a href=#">C</a></li>
<li class="items"><a href=#">D</a></li>
<li class="items"><a href=#">E</a></li>
</ul>
</li>
<li class="heading"><a href="#">Services</a>
<ul class="submenu">
<li class="items"><a href=#">A</a></li>
<li class="items"><a href=#">B</a></li>
<li class="items"><a href=#">C</a></li>
<li class="items"><a href=#">D</a></li>
<li class="items"><a href=#">E</a></li>
</ul>
</li>
<li class="heading"><a href="#">Products</a>
<ul class="submenu">
<li class="items"><a href=#">A</a></li>
<li class="items"><a href=#">B</a></li>
<li class="items"><a href=#">C</a></li>
<li class="items"><a href=#">D</a></li>
<li class="items"><a href=#">E</a></li>
</ul>
</li>
<li class="heading"><a href="#">Contact</a>
<ul class="submenu">
<li class="items"><a href=#">A</a></li>
<li class="items"><a href=#">B</a></li>
<li class="items"><a href=#">C</a></li>
<li class="items"><a href=#">D</a></li>
<li class="items"><a href=#">E</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>预期的结果是当我们将鼠标悬停在每个主菜单项上时，显示子菜单下拉并出现在主菜单项下方，但此代码中并未发生这种情况。
最佳答案
因为你有overflow: hidden;在你的 .menu 类中。
如果您删除此行，您的子菜单将显示。
您可以使用另一个类来控制 float 。
.clear { clear: both; }
并在最后一个 <li> 之后追加:
<div class="clear"></div>
关于html - 为什么使用溢出 :hidden css in its container element? 下拉菜单不会出现在其容器下方，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54485071/