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样式 .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; }3、效果显示