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

问题描述 投票：0回答：5

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

因为你的.menu课程中有overflow: hidden;。

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

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

.clear { clear: both; }

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

<div class="clear"></div>
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>
0
投票

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

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

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

0
投票

你有很多<a href=#">缺少引号。它应该是<a href="#">而不是

0
投票

谢谢你的回答。在删除上述代码中的所有错误后，我将找到最终代码。

重点：

  • 我用过display：flex而不是float left
  • 由于未使用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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.