纯CSS实现二级导航下拉菜单--css的简单应用

思想：使用css的display属性控制二级下拉菜单的显示与否。当鼠标移动到一级导航菜单的li标签时，显示二级导航菜单的ul标签。由于实现起来比较简单，所以在这里直接给出了参考代码。

1、纯CSS二级导航下拉菜单代码：

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8" content="text/html" http-equiv="content-type">
     <title>纯css二级导航下拉菜单</title>
     <meta name="keyword" content="关键字">
     <meta name="description" content="描述">
     <style type="text/css">
         *{margin: 0;padding: 0;}
         #bg{background: red;width: 100%;height: 35px;}
         nav{height: 35px;width: 1000px;margin: 0 auto;}
         nav ul li{list-style-type:none;float: left}
         nav ul li a{ text-decoration: none;display: block;width: 130px;line-height: 35px;text-align: center;
                     color:white;font-fimily:微软雅黑;}
         nav ul li ul li{float: none}
         nav ul li ul li a{color:black}
         nav ul li ul{display: none;}
         nav ul li:hover ul{display: block;}
     </style>
 </head>
 <body>
 <div id="bg">
 <nav>
     <ul>
         <li><a href="#">一级导航</a>
         <ul>
             <li><a href="#">二级导航</a></li>
             <li><a href="#">二级导航</a></li>
             <li><a href="#">二级导航</a></li>
             <li><a href="#">二级导航</a></li>
         </ul>
         </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="#">一级导航</a>
             <ul>
                 <li><a href="#">二级导航</a></li>
                 <li><a href="#">二级导航</a></li>
                 <li><a href="#">二级导航</a></li>
                 <li><a href="#">二级导航</a></li>
             </ul>
         </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="#">一级导航</a>
             <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></li>
             </ul>
         </li>
         <li><a href="#">一级导航</a>
             <ul>
                 <li><a href="#">二级导航</a></li>
                 <li><a href="#">二级导航</a></li>
                 <li><a href="#">二级导航</a></li>
                 <li><a href="#">二级导航</a></li>
             </ul>
         </li>
         <li><a href="#">一级导航</a>
             <ul>
                 <li><a href="#">二级导航</a></li>
                 <li><a href="#">二级导航</a></li>
             </ul>
         </li>
     </ul>
 </nav>
 </div>
 </body>
 </html>

2、运行效果:

源码：纯CSS实现二级导航下拉菜单.zip

备注：

　　文章为本人原创  转载请注明出处  文章难免会有纰漏之处  还望大家多多包含  如有意见或者建议可与本人联系  本人QQ：2187093468（非诚请勿扰，加好友请备注在哪里看到的）