导航栏目的菜单主要用到的就是display:none/block,:hover 这两个属性，结合背景颜色、高度的变换，来实现导航栏的多种变换。
css代码
*{
margin:0;
padding:0;
}
a{
text-decoration: none;
}
em{
font-style:normal;
}
li{
list-style:none;
}
ul{
width:600px;
height:50px;
background: chocolate;
margin:100px auto;
border-bottom:5px solid skyblue;
}
li{
float:left;
position: relative;
}
li a{
display: block;
width:100px;
height: 45px;
line-height: 45px;;
background: black;
color: blanchedalmond;
text-align: center;
border-right: 2px solid yellow;
border-left:2px solid red;
padding:0 8px;
margin-top:5px;
}
li a em{
display:none;
}
li a:hover span{
display: none;
}
li a:hover em{
display: block;
}
li a:hover{
color:black;
background: blanchedalmond;
height: 50px;
margin-top:0px;
}
html代码
<ul>
<li>
<a href="#">
<span>首页</span>
<em>home</em>
</a>
</li>
<li>
<a href="#">
<span>首页</span>
<em>home</em>
</a>
</li>
<li>
<a href="#">
<span>首页</span>
<em>home</em>
</a>
</li>
<li>
<a href="#">
<span>首页</span>
<em>home</em>
</a>
</li>
<li>
<a href="#">
<span>首页</span>
<em>home</em>
</a>
</li>
</ul>
原文：https://www.cnblogs.com/94-Lucky/p/13173371.html