<nav>
<ul class="clearfix">
<li><a href="#">首页</a></li>
<li><a href="#">作品</a></li>
<li>
<a href="#">更多</a>
<ul class="child">
<li><a href="">GitHub</a></li>
<li><a href="">博客</a></li>
<li><a href="">知乎</a></li>
</ul>
</li>
</ul>
</nav>
*{margin: 0;padding: 0;}
ul,ol{list-style: none;}
a{text-decoration: none;color: #333;}
.clearfix::after{
content: '';
display: block;
clear: both;
}
nav{
width: 500px;
margin: 10px auto 0;
box-shadow: 0px 2px 4px 1px rgba(0,0,0,0.3);
}
nav>ul>li{
position: relative;
float: left;
}
nav a{
display: block;
/*a链接是行内元素,加padding高度不变,所以加block或者inline-block*/
padding: 10px 20px;
min-width: 50px;
text-align: center;
background-color: pink;
}
nav a:hover{
color: #fff;
background: rgba(0,0,0,0.4);
}
nav .child{
position: absolute;
top: 100%;
box-shadow: 0px 2px 4px 1px rgba(0,0,0,0.3);
display: none;
}
/*鼠标放上去时出现二级菜单*/
nav>ul>li:hover .child{
display: block;
}
效果预览
image.png
网友评论