1、先写html代码
<div class="nav">
<ul>
<li><a href="">财经</a></li>
<li><a href="">娱乐</a></li>
<li><a href="">体育</a></li>
<li><a href="">科技</a></li>
<li><a href="">更多</a>
<ul>
<li><a href="">汽车</a> </li>
<li><a href="">时尚</a></li>
<li><a href="">星座</a></li>
</ul>
</li>
</ul>
</div>
这是导航栏要显示的内容
2、接着要先css样式3、效果显示.nav { width:960px; height:40px; background-color: #00a4ac; margin: 0 auto; position: relative; } .nav ul{ list-style-type: none; //去掉小黑点 } .nav ul li{ float:left; //让li元素向<span style="color: rgb(51, 51, 51); font-family: arial; font-size: 13px; line-height: 20.02px;">向左浮动</span> position: relative; } .nav ul li a{ width: 100px; height: 39px; display: block; //以块状显示 line-height: 35px; //让字体显示在中间(垂直方向) text-align:center; text-decoration:none; } .nav ul li a:hover{ //鼠标移到链接上时,发生动态变化 width: 100px; height: 39px; display: block; background-color: #FFFFFF; color: #00a4ac; } .nav ul li ul{ margin: 0; padding: 0; display: none; //隐藏暂不需要显示的链接块 } .nav ul li ul li{ float: none; //去掉向左浮动的模式 } .nav ul li:hover ul{ display: block; //点击更多的模块时,让属性变为可见 float:none; position: absolute; } .nav ul li ul li a{ display: block; background-color: #00a4ac; color: #FFFFFF; width:100px; height: 39px; } .nav ul li ul li a:hover{ display:block; width:100px; height: 39px; display: block; background-color:#FFFFFF; color:#00a4ac; }