用css写可以下拉的导航栏

最新推荐文章于 2022-07-04 19:03:17 发布

udbiqplfdn

最新推荐文章于 2022-07-04 19:03:17 发布

阅读量423

点赞数

分类专栏：前端文章标签： css导航栏

本文链接：https://blog.csdn.net/udbiqplfdn/article/details/52219683

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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