用css写可以下拉的导航栏

来源：互联网发布：知世公主和小樱公主编辑：程序博客网时间：2024/05/16 01:26

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、效果显示

0 0