为什么下拉菜单不会出现在其容器下方使用溢出：隐藏 css 在其容器元素中？答案

【问题标题】：Why does dropdown menu not appear below its container using overflow:hidden css in its container element?为什么下拉菜单不会出现在其容器下方使用溢出：隐藏 css 在其容器元素中？
【发布时间】：2019-02-01 18:17:59
【问题描述】：

问题是当下拉菜单显示时，我的下拉菜单的子菜单没有出现在其容器元素之外。在代码中，我有主菜单和子菜单项。主菜单项是：主页、关于、服务、产品和联系方式。每个主菜单项的子菜单项是：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>

当我们将鼠标悬停在每个主菜单项上时，预期的结果是显示子菜单下拉并出现在主菜单项下方，但在此代码中没有发生。

【问题讨论】：

标签： html css

【解决方案1】：

因为您的 .menu 类中有 overflow: hidden;。

如果删除此行，将显示您的子菜单。

你可以使用另一个类来控制浮动。

.clear { clear: both; }

并在你最后一个 <li> 之后追加：

<div class="clear"></div>

【讨论】：

谢谢，这似乎是问题所在。我还发布了更正的代码并使用 flex 来避免与浮动相关的错误。

【解决方案2】：

这里可以查看codepen

    <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>

【讨论】：

【解决方案3】：

如果一个元素比包含它的元素高，并且它是浮动的，它将溢出其容器之外。用代码修复这个问题：

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

查看工作示例： https://codepen.io/juditp/pen/KJmKjM

【讨论】：

感谢您的代码。帮助得到结果。我还发现问题是溢出隐藏，堆积是由于缺少 clearfix 类。在研究了您的 codepen 代码后，我能够修复代码。

【解决方案4】：

您有很多 <a href=#"> 缺少引号。应该是<a href="#">

【讨论】：

这也可能是问题所在。我发现溢出：隐藏是导致子菜单无法正常显示的问题。

【解决方案5】：

感谢您的回答。在删除上述代码中的所有错误后，我正在设置最终代码。

要点：

我使用了 display:flex 而不是向左浮动
由于不使用 float，因此没有 clearfix 类。这有助于在不向上堆叠的情况下显示子菜单。
我已经删除了溢出：隐藏在原始代码中，这似乎是隐藏下拉菜单的主要原因，

这个答案只是为了将我上面发布的错误代码更新为更正的代码。

.menu{
	background: #d80000;
	width: 100%;
	padding:10px 10px;
}

.mainmenu{
	list-style: none;
	display: flex;
}

.mainmenu .heading{
	margin-right: 2px;
	
}


.mainmenu .heading a{
	text-decoration: none;
	display: inline-block;
	padding: 10px 20px;
	color: #d80000;
	background: #fff;
	position: relative;
	width: 80px;
	text-align: center;
	text-transform: uppercase;
}

.submenu{
	list-style: none;
	position: absolute;
	display: none;
}

.heading a:hover{
	background: #d80000;
	color: #fff;
}

.heading:hover .submenu{
	display: block;
	margin-left: -40px;
}

.submenu .items a{
	width: 80px;
	text-align: center;
	border-top: 1px solid #d80000;
}

<html>
	<head> 
		<title>Menu</title>
		<link rel="stylesheet" type="text/css" href="style4.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>

【讨论】：