效果图:
代码如下:
<style>
*{
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}
.big{
height: 50px;
background-color: aqua;
box-shadow: 0 1px 2px gray;
}
.second{
float: left;
width: 80px;
text-align: center;
line-height: 50px;
}
.second:hover{
background-color: rgb(231, 107, 69);
}
.qq{
border-top: 1px solid grey;
display: none;
}
.qq a{
color: white;
}
.third{
box-shadow: 0 1px 2px rgb(57, 61, 60);
}
.second:hover .qq{
display: block;
}
.qq:hover{
background-color: cornflowerblue;
}
</style>
<body>
<div class="big">
<ul class="first">
<li class="second">
<a href="#">动漫</a>
<ul class="third">
<li class="qq"><a href="#">熊出没</a></li>
<li class="qq"><a href="#">喜羊羊</a></li>
<li class="qq"><a href="#">汪汪队</a></li>
</ul>
</li>
<li class="second"><a href="#">电影</a></li>
<li class="second"><a href="#">电视剧</a></li>
<li class="second"><a href="#">综艺</a></li>
</ul>
</div>
</body>