三种方式实现网页二级菜单

方法一：使用HTML和CSS实现

首先是Html代码，习惯上会将菜单放在一个div里，使用盒子模型，方便以后的操作和设置样式。

二级菜单也就是在一级菜单中的li中再添加一个ul-li结构

    <div class="test">  
        <ul>  
                <li>A</li>  
                    <li>B</li>  
                    <li>C  
                        <ul>  
                                <li>C1</li>  
                                <li>C2</li>  
                                <li>C3</li>  
                        </ul>  
                </li>  
        </ul>  
    </div>  

使用css代码设置样式

    <style type="text/css">  
            .test ul{  
                list-style-type: none;  
      
            }  
      
            .test ul li{  
      
                float:left;  
      
                /*以下设置仅为方便查看效果*/  
                width:50px;  
                height:20px;  
                border:1px solid black;  
                text-align: center;  
            }  
      
            .test ul li ul{  
                display: none;  
            }  
      
            .test li:hover ul{  
                display:block;  
            }  
      
    </style>  

解释三个重要的css代码：

1.写出一个ul-li菜单时，它会默认垂直排列，而我们需要的是水平的菜单栏，所以需要设置li的浮动：float：left

2.当鼠标悬浮在有二级菜单的一级菜单选项时，才会出现二级菜单，所以在鼠标不悬浮的情况下，需要把二级隐藏起

来display：none

3.最后，设置li :hover ul 这个意思是，当鼠标悬浮在li上时，li下的ul呈现状态，hover是悬浮的意思，在设置a标签样

式时应该会接触过

方法二：使用jQuery实现

要用到jQuery首先第一步就是引入jquery.js文件

<script type="text/javascript" src="js/jquery-1.7.min.js"></script>

在平时做网页项目时，最好是将css，html，js分开，在html页面中引入css和js文件，css文件引入放在head中，js放在body的最后，这是为了在加载网页时，先加载出它的样式，最后加载js动态。那么注意了，在这里如果你的js代码是放在body中，那么引入jquery文件必须放在js代码之前，浏览器编译html文件时，是从上自下编译的，如果jquery文件放在最后，那么在你的js代码又使用到了jquery的功能，后果可想而知，效果是出不来的。

下面两种方式都是可行的，第一种二级菜单出现的很直接，fade呢有一个渐入渐出的过程

200，300的都是时间，估计是以ms为单位，有待查验。

js代码：

    <script type="text/javascript">  
            /* js 语句 $(function(){});*/  
            $(function(){  
                $(".test li").hover(  
                        /*找父亲（li）下面的ul*/  
                        function() {  
                            $(this).find("ul").show(200);  
                        },function(){  
                            $(this).find("ul").hide(300);  
                        }  
                );  
      
                $(".test li").hover(  
                        function(){  
                            $(this).find("ul").fadeIn(300);  
                        },function(){  
                            $(this).find("ul").fadeOut(300);  
                        }  
                );  
            });  
    </script>  

方法三：使用Bootstrap实现

如果不了解Bootstrap是什么，出门找百度咨询一下

和jquery类似的，需要引入三个文件：

1. bootstrap.min.css   2.  jquery-3.1.0.min.js  3. bootstrap.min.js

因为bootstrap所有js代码都是需要jquery做支撑的，所以只要引入bootstrap.js都必须引入jquery

其实博主前面都偷了个懒，没有给每个li添加a标签，在实际操作中这是非常必要的，除非你要做一个不实现跳转功能

的摆设菜单，那就随便怎么玩了。使用Bootstrap框架就必须使用a标签了，因为它的很多样式是设置在a标签上的，

不使用没有效果，相比前面的两种来说，使用框架又省力又省心，非常简单。

只需三步：

1.为一级菜单的ul添加class-nav nav-pills（或者nav-tabs 等等）

2.为一级菜单中有下拉二级菜单的li添加 class-dropdown

为a标签添加属性：data-toggle="dropdown" 以及class-dropdown-toggle

3.给2步骤中li下的ul添加class-dropdown-menu

实例：

    <ul class="nav nav-pills">  
        <li>  
            <a href="#">A</a>  
        </li>  
        <li class="dropdown">  
            <!-- span标签 是添加一个下三角的图标 -->  
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">B<span class="caret"></span></a>  
            <ul class="dropdown-menu">  
                <li><a href="#">B1</a></li>  
                <li><a href="#">B2</a></li>  
                <li><a href="#">B3</a></li>  
                <li><a href="#">B4</a></li>  
            </ul>  
        </li>  
        <li><a href="#">C</a></li>  
    </ul>