个人中心
gpt4 book ai didi

html - 当我设置背景颜色但同时看不到我的下拉列表时

转载 作者：行者123 更新时间：2023-11-28 00:51:59 25 4
gpt4 key购买 nike

运行代码并添加背景颜色你会发现我面临的问题。当我添加 overflow hidden 的背景颜色时，我无法从菜单中看到我的下拉列表。我尽可能多地尝试，但从两天开始就没有解决这个问题。我现在应该怎么做？请有人帮我解决这个问题。

谢谢

.wrapper{
	width:980px;
	margin:0 auto;
	padding:0px;
}
.mainmenu{}
.mainmenu ul{
	list-style-type:none;
	position:relative;
	float:left;
	margin:0px;
	padding:0px;
}
.mainmenu ul li{
	position:relative;
    float: left;
	margin:0px;
	padding:0px;
}
.mainmenu ul a{
	display:block;
	text-decoration:none;
	color:black;
	margin:0px;
	padding:10px 25px;
	line-height:15px;
	text-align:middle;
	font-weight:400;
	font-size:16px;
}
.mainmenu ul li a:hover{
	background-color:#9988ff;
	color:white;
}
.mainmenu ul ul{
	position:absolute;
	display:none;
	top:100%;
	left:0;
	top:35px;
	background-color:yellow;
	z-index:1;
}
.mainmenu ul ul ul{
	top:0;
	left:100%;
}
.mainmenu ul ul li{
	float:none;
	width:200px;
}
.mainmenu ul li:hover > ul{
	display:block;
}
.content{
	margin:15px;
	padding:5px;
}
.main-content{
	width:500px;
	float:left;
}
img{
	width:100%;
}
.sidebar{
	width:425px;
	float:right;
}
<!DOCTYPE html>
<html>
    <head>
        <title>Hassan Softwear Inc. Consultancy</title>
        <link rel="stylesheet" href="css_five.css" type="text/css">
    </head>
    <body>
        <div class="wrapper">
            <div class="header"></div>
            <div class="mainmenu">
                <ul>
                    <li><a href="#">HOME</a></li>
                    <li><a href="#">ABOUT</a>
						<ul>
							<li><a href="#">Chairman</a></li>
							<li><a href="#">Director</a></li>
							<li><a href="#">Manager</a></li>
							<li><a href="#">Clients</a></li>
						</ul>
					</li>
                    <li><a href="#">ADMISSION</a>
						<ul>
							<li><a href="#">Apply for Ai</a>
								<ul>
									<li><a href="#">CATEGORY A</a></li>
									<li><a href="#">CATEGORY B</a></li>
									<li><a href="#">CATEGORY C</a>
										<ul>
											<li><a href="#">CATEGORY A</a></li>
											<li><a href="#">CATEGORY B</a></li>
											<li><a href="#">CATEGORY C</a>
												<ul>
													<li><a href="#">CATEGORY A</a></li>
													<li><a href="#">CATEGORY B</a></li>
													<li><a href="#">CATEGORY C</a></li>
													<li><a href="#">CATEGORY D</a></li>
													<li><a href="#">CATEGORY E</a></li>
												</ul>											
											</li>
											<li><a href="#">CATEGORY D</a></li>
											<li><a href="#">CATEGORY E</a></li>
										</ul>									
									</li>
									<li><a href="#">CATEGORY D</a></li>
									<li><a href="#">CATEGORY E</a></li>
								</ul>							
							</li>
							<li><a href="#">Apply for Ps</a>
								<ul>
									<li><a href="#">CATEGORY A</a></li>
									<li><a href="#">CATEGORY B</a></li>
									<li><a href="#">CATEGORY C</a>
										<ul>
											<li><a href="#">CATEGORY A</a></li>
											<li><a href="#">CATEGORY B</a></li>
											<li><a href="#">CATEGORY C</a>
												<ul>
													<li><a href="#">CATEGORY A</a></li>
													<li><a href="#">CATEGORY B</a></li>
													<li><a href="#">CATEGORY C</a></li>
													<li><a href="#">CATEGORY D</a></li>
													<li><a href="#">CATEGORY E</a></li>
												</ul>											
											</li>
											<li><a href="#">CATEGORY D</a></li>
											<li><a href="#">CATEGORY E</a></li>
										</ul>										
									</li>
									<li><a href="#">CATEGORY D</a></li>
									<li><a href="#">CATEGORY E</a></li>
								</ul>							
							</li>
							<li><a href="#">Apply for html</a>
								<ul>
									<li><a href="#">CATEGORY A</a></li>
									<li><a href="#">CATEGORY B</a></li>
									<li><a href="#">CATEGORY C</a>
										<ul>
											<li><a href="#">CATEGORY A</a></li>
											<li><a href="#">CATEGORY B</a></li>
											<li><a href="#">CATEGORY C</a>
												<ul>
													<li><a href="#">CATEGORY A</a></li>
													<li><a href="#">CATEGORY B</a></li>
													<li><a href="#">CATEGORY C</a></li>
													<li><a href="#">CATEGORY D</a></li>
													<li><a href="#">CATEGORY E</a></li>
												</ul>											
											</li>
											<li><a href="#">CATEGORY D</a></li>
											<li><a href="#">CATEGORY E</a></li>
										</ul>										
									</li>
									<li><a href="#">CATEGORY D</a></li>
									<li><a href="#">CATEGORY E</a></li>
								</ul>							
							</li>
							<li><a href="#">Apply for css</a>
								<ul>
									<li><a href="#">CATEGORY A</a></li>
									<li><a href="#">CATEGORY B</a></li>
									<li><a href="#">CATEGORY C</a>
										<ul>
											<li><a href="#">CATEGORY A</a></li>
											<li><a href="#">CATEGORY B</a></li>
											<li><a href="#">CATEGORY C</a></li>
											<li><a href="#">CATEGORY D</a></li>
											<li><a href="#">CATEGORY E</a></li>
										</ul>										
									</li>
									<li><a href="#">CATEGORY D</a></li>
									<li><a href="#">CATEGORY E</a></li>
								</ul>							
							</li>
							<li><a href="#">Apply for Java</a></li>
							<li><a href="#">Apply for Python</a></li>
							<li><a href="#">Apply for Others</a></li>
						</ul>					
					</li>
                    <li><a href="#">TUTORIAL</a>
						<ul>
							<li><a href="#">HTML</a></li>
							<li><a href="#">CSS</a></li>
							<li><a href="#">JAVA</a></li>
							<li><a href="#">PYTHON</a></li>
							<li><a href="#">C</a></li>
							<li><a href="#">C++</a></li>
						</ul>
					</li>
                    <li><a href="#">OUR PLAN</a>
						<ul>
							<li><a href="#">Diamond</a>
								<ul>
									<li><a href="#">CATEGORY A</a></li>
									<li><a href="#">CATEGORY B</a></li>
									<li><a href="#">CATEGORY C</a>
										<ul>
											<li><a href="#">CATEGORY A</a></li>
											<li><a href="#">CATEGORY B</a></li>
											<li><a href="#">CATEGORY C</a></li>
											<li><a href="#">CATEGORY D</a></li>
											<li><a href="#">CATEGORY E</a></li>
										</ul>										
									</li>
									<li><a href="#">CATEGORY D</a></li>
									<li><a href="#">CATEGORY E</a></li>
								</ul>
							</li>
							<li><a href="#">Platinum</a>
								<ul>
									<li><a href="#">CATEGORY A</a></li>
									<li><a href="#">CATEGORY B</a></li>
									<li><a href="#">CATEGORY C</a></li>
									<li><a href="#">CATEGORY D</a></li>
									<li><a href="#">CATEGORY E</a></li>
								</ul>							
							</li>
							<li><a href="#">Golden</a>
								<ul>
									<li><a href="#">CATEGORY A</a></li>
									<li><a href="#">CATEGORY B</a></li>
									<li><a href="#">CATEGORY C</a></li>
									<li><a href="#">CATEGORY D</a></li>
									<li><a href="#">CATEGORY E</a></li>
								</ul>							
							</li>
							<li><a href="#">Silver</a>
								<ul>
									<li><a href="#">CATEGORY A</a></li>
									<li><a href="#">CATEGORY B</a></li>
									<li><a href="#">CATEGORY C</a></li>
									<li><a href="#">CATEGORY D</a></li>
									<li><a href="#">CATEGORY E</a></li>
								</ul>							
							</li>
							<li><a href="#">Bronze</a>
								<ul>
									<li><a href="#">CATEGORY A</a></li>
									<li><a href="#">CATEGORY B</a></li>
									<li><a href="#">CATEGORY C</a></li>
									<li><a href="#">CATEGORY D</a></li>
									<li><a href="#">CATEGORY E</a></li>
								</ul>							
							</li>
							<li><a href="#">Aluminium</a>
								<ul>
									<li><a href="#">CATEGORY A</a></li>
									<li><a href="#">CATEGORY B</a></li>
									<li><a href="#">CATEGORY C</a></li>
									<li><a href="#">CATEGORY D</a></li>
									<li><a href="#">CATEGORY E</a></li>
								</ul>							
							</li>
							<li><a href="#">Sodium</a></li>
						</ul>					
					</li>
                    <li><a href="#">NOTICE</a></li>
                    <li><a href="#">BLOG</a></li>
                    <li><a href="#">CONTACT</a></li>
                </ul>
            </div>
            <div class="content"></div>
            <div class="footer"></div>
        </div>
    </div>
</body>
</html>

最佳答案

不要设置溢出隐藏，它会隐藏下拉菜单。

你会发现只给div.mainmenu设置背景色是行不通的，因为获取不到child的高度。因此它显示为 0px 高度并且看不到背景颜色。

要让父级获取高度，只需设置 height:35px ，或者在 ul 后添加一个 style="clear:both"的 div。

以下代码使用了清晰的两个 div。

.wrapper{
	width:980px;
	margin:0 auto;
	padding:0px;
}
.mainmenu{background-color:red;}
.mainmenu ul{
	list-style-type:none;
	position:relative;
	float:left;
	margin:0px;
	padding:0px;
}
.mainmenu ul li{
	position:relative;
    float: left;
	margin:0px;
	padding:0px;
}
.mainmenu ul a{
	display:block;
	text-decoration:none;
	color:black;
	margin:0px;
	padding:10px 25px;
	line-height:15px;
	text-align:middle;
	font-weight:400;
	font-size:16px;
}
.mainmenu ul li a:hover{
	background-color:#9988ff;
	color:white;
}
.mainmenu ul ul{
	position:absolute;
	display:none;
	top:100%;
	left:0;
	top:35px;
	background-color:yellow;
	z-index:1;
}
.mainmenu ul ul ul{
	top:0;
	left:100%;
}
.mainmenu ul ul li{
	float:none;
	width:200px;
}
.mainmenu ul li:hover > ul{
	display:block;
}
.content{
	margin:15px;
	padding:5px;
}
.main-content{
	width:500px;
	float:left;
}
img{
	width:100%;
}
.sidebar{
	width:425px;
	float:right;
}
<!DOCTYPE html>
<html>
    <head>
        <title>Hassan Softwear Inc. Consultancy</title>
        <link rel="stylesheet" href="css_five.css" type="text/css">
    </head>
    <body>
        <div class="wrapper">
            <div class="header"></div>
            <div class="mainmenu">
                <ul>
                    <li><a href="#">HOME</a></li>
                    <li><a href="#">ABOUT</a>
						<ul>
							<li><a href="#">Chairman</a></li>
							<li><a href="#">Director</a></li>
							<li><a href="#">Manager</a></li>
							<li><a href="#">Clients</a></li>
						</ul>
					</li>
                    <li><a href="#">ADMISSION</a>
						<ul>
							<li><a href="#">Apply for Ai</a>
								<ul>
									<li><a href="#">CATEGORY A</a></li>
									<li><a href="#">CATEGORY B</a></li>
									<li><a href="#">CATEGORY C</a>
										<ul>
											<li><a href="#">CATEGORY A</a></li>
											<li><a href="#">CATEGORY B</a></li>
											<li><a href="#">CATEGORY C</a>
												<ul>
													<li><a href="#">CATEGORY A</a></li>
													<li><a href="#">CATEGORY B</a></li>
													<li><a href="#">CATEGORY C</a></li>
													<li><a href="#">CATEGORY D</a></li>
													<li><a href="#">CATEGORY E</a></li>
												</ul>											
											</li>
											<li><a href="#">CATEGORY D</a></li>
											<li><a href="#">CATEGORY E</a></li>
										</ul>									
									</li>
									<li><a href="#">CATEGORY D</a></li>
									<li><a href="#">CATEGORY E</a></li>
								</ul>							
							</li>
							<li><a href="#">Apply for Ps</a>
								<ul>
									<li><a href="#">CATEGORY A</a></li>
									<li><a href="#">CATEGORY B</a></li>
									<li><a href="#">CATEGORY C</a>
										<ul>
											<li><a href="#">CATEGORY A</a></li>
											<li><a href="#">CATEGORY B</a></li>
											<li><a href="#">CATEGORY C</a>
												<ul>
													<li><a href="#">CATEGORY A</a></li>
													<li><a href="#">CATEGORY B</a></li>
													<li><a href="#">CATEGORY C</a></li>
													<li><a href="#">CATEGORY D</a></li>
													<li><a href="#">CATEGORY E</a></li>
												</ul>											
											</li>
											<li><a href="#">CATEGORY D</a></li>
											<li><a href="#">CATEGORY E</a></li>
										</ul>										
									</li>
									<li><a href="#">CATEGORY D</a></li>
									<li><a href="#">CATEGORY E</a></li>
								</ul>							
							</li>
							<li><a href="#">Apply for html</a>
								<ul>
									<li><a href="#">CATEGORY A</a></li>
									<li><a href="#">CATEGORY B</a></li>
									<li><a href="#">CATEGORY C</a>
										<ul>
											<li><a href="#">CATEGORY A</a></li>
											<li><a href="#">CATEGORY B</a></li>
											<li><a href="#">CATEGORY C</a>
												<ul>
													<li><a href="#">CATEGORY A</a></li>
													<li><a href="#">CATEGORY B</a></li>
													<li><a href="#">CATEGORY C</a></li>
													<li><a href="#">CATEGORY D</a></li>
													<li><a href="#">CATEGORY E</a></li>
												</ul>											
											</li>
											<li><a href="#">CATEGORY D</a></li>
											<li><a href="#">CATEGORY E</a></li>
										</ul>										
									</li>
									<li><a href="#">CATEGORY D</a></li>
									<li><a href="#">CATEGORY E</a></li>
								</ul>							
							</li>
							<li><a href="#">Apply for css</a>
								<ul>
									<li><a href="#">CATEGORY A</a></li>
									<li><a href="#">CATEGORY B</a></li>
									<li><a href="#">CATEGORY C</a>
										<ul>
											<li><a href="#">CATEGORY A</a></li>
											<li><a href="#">CATEGORY B</a></li>
											<li><a href="#">CATEGORY C</a></li>
											<li><a href="#">CATEGORY D</a></li>
											<li><a href="#">CATEGORY E</a></li>
										</ul>										
									</li>
									<li><a href="#">CATEGORY D</a></li>
									<li><a href="#">CATEGORY E</a></li>
								</ul>							
							</li>
							<li><a href="#">Apply for Java</a></li>
							<li><a href="#">Apply for Python</a></li>
							<li><a href="#">Apply for Others</a></li>
						</ul>					
					</li>
                    <li><a href="#">TUTORIAL</a>
						<ul>
							<li><a href="#">HTML</a></li>
							<li><a href="#">CSS</a></li>
							<li><a href="#">JAVA</a></li>
							<li><a href="#">PYTHON</a></li>
							<li><a href="#">C</a></li>
							<li><a href="#">C++</a></li>
						</ul>
					</li>
                    <li><a href="#">OUR PLAN</a>
						<ul>
							<li><a href="#">Diamond</a>
								<ul>
									<li><a href="#">CATEGORY A</a></li>
									<li><a href="#">CATEGORY B</a></li>
									<li><a href="#">CATEGORY C</a>
										<ul>
											<li><a href="#">CATEGORY A</a></li>
											<li><a href="#">CATEGORY B</a></li>
											<li><a href="#">CATEGORY C</a></li>
											<li><a href="#">CATEGORY D</a></li>
											<li><a href="#">CATEGORY E</a></li>
										</ul>										
									</li>
									<li><a href="#">CATEGORY D</a></li>
									<li><a href="#">CATEGORY E</a></li>
								</ul>
							</li>
							<li><a href="#">Platinum</a>
								<ul>
									<li><a href="#">CATEGORY A</a></li>
									<li><a href="#">CATEGORY B</a></li>
									<li><a href="#">CATEGORY C</a></li>
									<li><a href="#">CATEGORY D</a></li>
									<li><a href="#">CATEGORY E</a></li>
								</ul>							
							</li>
							<li><a href="#">Golden</a>
								<ul>
									<li><a href="#">CATEGORY A</a></li>
									<li><a href="#">CATEGORY B</a></li>
									<li><a href="#">CATEGORY C</a></li>
									<li><a href="#">CATEGORY D</a></li>
									<li><a href="#">CATEGORY E</a></li>
								</ul>							
							</li>
							<li><a href="#">Silver</a>
								<ul>
									<li><a href="#">CATEGORY A</a></li>
									<li><a href="#">CATEGORY B</a></li>
									<li><a href="#">CATEGORY C</a></li>
									<li><a href="#">CATEGORY D</a></li>
									<li><a href="#">CATEGORY E</a></li>
								</ul>							
							</li>
							<li><a href="#">Bronze</a>
								<ul>
									<li><a href="#">CATEGORY A</a></li>
									<li><a href="#">CATEGORY B</a></li>
									<li><a href="#">CATEGORY C</a></li>
									<li><a href="#">CATEGORY D</a></li>
									<li><a href="#">CATEGORY E</a></li>
								</ul>							
							</li>
							<li><a href="#">Aluminium</a>
								<ul>
									<li><a href="#">CATEGORY A</a></li>
									<li><a href="#">CATEGORY B</a></li>
									<li><a href="#">CATEGORY C</a></li>
									<li><a href="#">CATEGORY D</a></li>
									<li><a href="#">CATEGORY E</a></li>
								</ul>							
							</li>
							<li><a href="#">Sodium</a></li>
						</ul>					
					</li>
                    <li><a href="#">NOTICE</a></li>
                    <li><a href="#">BLOG</a></li>
                    <li><a href="#">CONTACT</a></li>
                </ul><div style="clear:both"></div>
            </div>
            <div class="content"></div>
            <div class="footer"></div>
        </div>
    </div>
</body>
</html>

关于html - 当我设置背景颜色但同时看不到我的下拉列表时，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53164753/

25 4 0
文章推荐： javascript - 如何设置jQuery中图像的宽度？
文章推荐： C++:定义类函数的 .cpp 文件中实例本身的表示关键字
文章推荐： javascript - 协调 View /调度事件
文章推荐： javascript - 如何更改一个按钮以在使用 jQuery 单击时切换当前/ future 事件？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com