html - 当我设置背景颜色但同时看不到我的下拉列表时
问题描述
运行代码并添加背景颜色，您会发现我面临的问题。 当我添加隐藏溢出的背景颜色时，我无法从菜单中看到我的下拉列表。我尝试了两天，但没有解决这个问题。我现在该怎么办？请有人帮我解决这个问题。
谢谢
.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>推荐阅读
- r - 修改/添加列到嵌套 tibble
- angular-dart - AngularDart 材质颜色主题
- ios - Stack View 大小变化无法可视化
- webpack - 如何使用 vue-cli 安装其他 vue 版本不是最新的
- javascript - 从 PHP while 循环中随机化 jquery 中“DIV”的边框颜色
- android - 为 FrameLayout 内的所有自定义视图触发 OnClickListener
- c# - C#：在转换泛型类型时，为什么需要对象？
- amazon-web-services - 在 AWS 服务中存储特定于环境的配置变量时，我该怎么做？
- android - 如何在应用程序自动退出时获取通知并在关闭时清理数据
- javascript - Three.js - 通过鼠标移动和点击创建/更新网格