版权声明:未经同意不得转载 https://blog.csdn.net/qq_42707446/article/details/85296557
<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);
}