<div class="nav">
<ul>
<li>
<a href="">nav item</a>
<ul>
<li><a href="">nav item</a></li>
<li><a href="">nav item</a></li>
<li><a href="">nav item</a></li>
<li><a href="">nav item</a></li>
<li><a href="">nav item</a></li>
</ul>
</li>
<li>
<a href="">nav item</a>
<ul>
<li><a href="">nav item</a></li>
<li><a href="">nav item</a></li>
<li><a href="">nav item</a></li>
<li><a href="">nav item</a></li>
<li><a href="">nav item</a></li>
</ul>
</li>
<li>
<a href="">nav item</a>
<ul>
<li><a href="">nav item</a></li>
<li><a href="">nav item</a></li>
<li><a href="">nav item</a></li>
<li><a href="">nav item</a></li>
<li><a href="">nav item</a></li>
</ul>
</li>
<li>
<a href="">nav item</a>
<ul>
<li><a href="">nav item</a></li>
<li><a href="">nav item</a></li>
<li><a href="">nav item</a></li>
<li><a href="">nav item</a></li>
<li><a href="">nav item</a></li>
</ul>
</li>
</ul>
</div>
* {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: beige;
}
ul {
list-style: none;
}
.nav {
width: 430px;
margin: 0 auto;
margin-top: 200px;
}
//设置第一个ul
.nav>ul {
width: 100%;
background-color: #333;
display: flex;
}
//定位第一个ul后的第一个li
.nav>ul>li {
position: relative;
}
//先把li标签后的ul移到很远很远的地方
.nav li ul {
position: absolute;
left: -9999999em;
}
//当鼠标放在第一个ul后的第一个li上时,在把后面的ul定位回来
.nav ul>li:hover ul {
position: absolute;
left: 0;
}
.nav li ul,
.nav li ul li {
width: 100%;
}
.nav li ul {
background-color: #273754;
}
.nav li ul a {
border-top: 1px solid#595959;
}
.nav a {
display: block;
padding: 10px 20px;
line-height: 30px;
border-right: 1px solid#595959;
}
.nav a:hover {
background: rgba(0, 0, 0, .2);
}
下拉菜单li position:relative; 下拉菜单ul position:absolute; (脱离文档流)
1.display:none; display:black; 下拉菜单li position:relative; 下拉菜单ul position:absolute; (脱离文档流)
2.设置li固定高度 opacity:0;opacity:1; 下拉菜单li position:relative; 下拉菜单ul position:absolute;
3.设置li固定高度,overflow:hidden;(溢出的ul隐藏) 当鼠标进入li的时候 li:hover ul {overflow:visible;}(溢出显示)
4.定位ul 的left:-99999px; 鼠标进入li的时候在将 ul 的 li 的left:0;
5.设置 下菜单ul 的高度为0; opacity:0;opacity:1; li:hover ul 在设置ul的高度