为什么下拉菜单在其容器元素中未使用overflow：hidden css出现在其容器下方？

时间：2019-02-01 18:17:59

标签： html css html5 css3

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

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

5 个答案:

答案 0 :(得分：0)

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

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

您可以使用另一个类来控制float。

.clear { clear: both; }

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

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

答案 1 :(得分：0)

在这里您可以检查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>

答案 2 :(得分：0)

如果一个元素比包含它的元素高，并且它是浮动的，它将在其容器外溢出。 使用代码解决此问题：

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

请参见工作示例： https://codepen.io/juditp/pen/KJmKjM

答案 3 :(得分：0)

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

答案 4 :(得分：0)

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

重要点：

  • 我使用display：flex而不是向左浮动
  • 由于不使用浮点数，因此没有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>

相关问题
最新问题