html 导航栏二级菜单

HTML+CSS 实现网页二级导航栏
首先写HTML文件，写你想要制作的导航栏，例如：

<html>
<head>
<title>二级导航栏</title>
</head>
<body>
  <div  class="sty">  
     <ul>  
          <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>  
          <li><a href="#">web前端</a>  
              <ul>  
                  <li><a href="#">html5</a></li>  
                  <li><a href="#">css</a></li>  
                  <li><a href="#">JavaScript</a></li>  
              </ul>  
          </li>  
          <li><a href="#">网络营销</a></li>  
          <li><a href="#">新闻资讯</a></li>  
     </ul>  
</div>  
</body>
</html>

在一级标签写嵌套二级标签即可,这样写好一个二级导航栏基本确定，只需要加样式就好啦
然后写css文件，设定样式

  *{
      margin: 0;
      padding: 0;
    }
    /*CSS全局设置*/  
    *{  
       margin:0;  
       padding:0;  
    }  
    .nav{  
       background-color:#4a4a4a;  
       height:40px;  
       width:450px;  
 
       margin:0 auto;  
    }  
    /*横向一级菜单样式设置*/  
    ul{  
       list-style:none;  
    }  
    ul li{  
       float:left;  
       line-height:40px;  
       text-align:center;  
       position:relative;  
    }  
    a{  
        text-decoration:none;  
        color:white;  
        display:block;/*将a行内元素转变成块级元素*/  
        width:90px;  
        height:40px;  
    }  
    a:hover{  
        background-color:#666666;  
        color:#FFFFFF;  
    }  
    /*二级下拉菜单样式设置*/  
    ul li ul{  
        position:absolute;  
        top:40px;  
        left:0px;  
        display:none;/*默认状态下或鼠标离开时隐藏*/  
        width:90px;  
    }  
    ul li ul li{  
        float:none;  
        background-color:#EEEEEE;  
    }   
    ul li ul li a:link,ul li ul li a:visited{  
        background-color:#4a4a4a;  
    }  
    ul li ul li a:hover{  
        background-color:#009933;  
    }  
    /*鼠标滑过一级菜单的元素时显示下拉菜单*/  
    ul li:hover ul{  
        display:block;  
    }

效果图如下：

html 导航栏二级菜单

猜你喜欢