天天看点
返回

下拉菜单思路及实现

制作思路

  1. 静态网页的制作
  2. 动态特效的视线——下拉菜单的显示与隐藏【css方法实现／jQuery方法实现／JavaScript方法实现】
  3. 浏览器兼容

静态网页的制作（HTML+CSS）

  1. 项目列表：

    <ul><li></li></ul>

     标签
  2. 链接：

    <a>

     标签
  3. 浮动：

    float

  4. display:block
  5. 元素的定位：

    position

版本1.0【CSS实现】代码 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>下拉菜单实现-CSS（版本1.0）</title>
    <style type="text/css">
        * {
            /*盒子有自己默认的margin和padding，去掉这些*/
            margin: ;
            padding: ;
        }
        #menu {
            background-color: #eee;
            width: px;
            height: px;
            margin:  auto;
        }
        ul {
            list-style: none;   /**/
        }
        ul li {
            float: left;    /*让列表横向显示*/
            line-height: px; /*垂直居中*/
            text-align: center; /*水平居中*/
            position: relative; /*将下拉菜单放在指定位置第二步，让子菜单针对此菜单进行定位，而不是针对浏览器定位*/

        }
        ul li:hover ul{
            display: block; /*其次，鼠标划过时下拉菜单显示*/
        }
        ul li ul {
            position: absolute; /*将下拉菜单放在指定位置第一步*/
            left: ;    /*绝对absolute定位要配合left和top使用*/
            top: px;
            display: none;      /*首先，下拉菜单隐藏*/
        }
        ul li ul li {
            float: none;    /*子列表竖向显示*/
            background-color: #eeeeee;
            margin-top: px;
            border: px solid #ff1212;
        }
        a {
            padding:  px;    /*让宽度自适应文字大小*/
            text-decoration: none;   /*取消链接下划线*/
            color: #000;
            display: block; /*将a标签变为块级元素*/
            height: px;
        }
        a:hover {
            color: white; /*鼠标滑过时文字颜色为白色*/
            background-color: #787f80;   /*鼠标滑过时背景颜色*/
        }
        ul li ul li a {
            width: auto;    /*让下拉菜单框大小自适应文字多少*/
        }
        ul li ul li a:hover{
            background-color: #ff1212;  /*设置二级菜单的样式*/
        }
    </style>
</head>
<body>
<div id="menu">
    <ul>
        <li><a href="#">首页</a></li>
        <li><a href="#">前端学习</a>
            <ul>
                <li><a>HTMLHTMLHTMLHTMLHTMLHTML</a></li>
                <li><a>CSS</a></li>
                <li><a>JavaScript</a></li>
                <li><a>jQuery</a></li>
            </ul>
        </li>
        <li><a href="#">后端学习</a>
            <ul>
                <li><a>HTML</a></li>
                <li><a>CSS</a></li>
                <li><a>JavaScript</a></li>
                <li><a>jQuery</a></li>
            </ul></li>
        <li><a href="#">算法学习</a>
            <ul>
                <li><a>HTML</a></li>
                <li><a>CSS</a></li>
                <li><a>JavaScript</a></li>
                <li><a>jQuery</a></li>
            </ul></li>
        <li><a href="#">网络学习</a>
            <ul>
                <li><a>HTML</a></li>
                <li><a>CSS</a></li>
                <li><a>JavaScript</a></li>
                <li><a>jQuery</a></li>
            </ul></li>
    </ul>
</div>
</body>
</html>

版本1.1【JavaScript实现】代码

  1. onmouseover

     、

    onmouseout

     、

    getElementsById

     、

    this
  2. 代码如下： 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>下拉菜单实现-JavaScript（版本1.1）</title>
    <style type="text/css">
        * {margin:; padding:;}
        #menu{background-color:#eee; width:px; height:px; margin: auto;}
        ul {list-style:none;}
        ul li {float:left; line-height:px; text-align:center; position:relative;}
        a {text-decoration:none; color:black; display:block; width:px;}
        a:hover{color:white; background-color:gray;}
        ul li ul{width:px; position:absolute; left:; top:px; display:none;}
        ul li ul li{float:none; border-left:none; margin-top:px; background-color:#eee;}
    </style>
    <script type="text/javascript">
        function showSubMenu(li) {
            //获取li下的ul子菜单
            var subMenu = li.getElementsByTagName('ul')[];
            subMenu.style.display = 'block';
        }
        function hideSubMenu(li) {
            var subMenu = li.getElementsByTagName('ul')[];
            subMenu.style.display = 'none';
        }
    </script>

</head>
<body>
<div id="menu">
    <ul>
        <li><a href="#">首页</a></li>
        <li onmouseover="showSubMenu(this)" onmouseout="hideSubMenu(this)"><a href="#">前端学习</a>
            <ul>
                <li><a href="#">HTMLHTMLHTMLHTMLHTMLHTML</a></li>
                <li><a href="#">CSS</a></li>
                <li><a href="#">JavaScript</a></li>
                <li><a href="#">jQuery</a></li>
            </ul>
        </li>
        <li><a href="#">后端学习</a>
            <ul>
                <li><a href="#">HTML</a></li>
                <li><a href="#">CSS</a></li>
                <li><a href="#">JavaScript</a></li>
                <li><a href="#">jQuery</a></li>
            </ul></li>
        <li><a href="#">算法学习</a>
            <ul>
                <li><a href="#">HTML</a></li>
                <li><a href="#">CSS</a></li>
                <li><a href="#">JavaScript</a></li>
                <li><a href="#">jQuery</a></li>
            </ul></li>
        <li><a href="#">网络学习</a>
            <ul>
                <li><a href="#">HTML</a></li>
                <li><a href="#">CSS</a></li>
                <li><a href="#">JavaScript</a></li>
                <li><a href="#">jQuery</a></li>
            </ul></li>
    </ul>
</div>
</body>
</html>

版本1.2【jQuery实现】代码

  1. $(function(){})

     、

    children()

     、

    show()

     、

    hide()
  2. 代码如下： 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>下拉菜单实现-CSS（版本1.0）</title>
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
    <script type="text/javascript">
        $(function () {
            $('.outer').mouseover(function () {
                $(this).children('ul').show();
            });
            $('.outer').mouseout(function () {
                $(this).children('ul').hide();
            });
        });

    </script>

    <style type="text/css">
        * {
            margin: ;
            padding: ;
        }
        #menu {
            background-color: #eeeeff;
            width: px;
            height: px;
            margin:  auto;
        }
        ul {
            list-style: none;
        }
        ul li {
            float:left;
            line-height: px;
            text-align: center;
            position: relative;
        }
        a {
            text-decoration: none;
            color: #000;
            display: block;
            width: px;
        }
        a:hover {
            color: #FFFFFF;
            background-color: #666666;
        }
        ul li ul li {
            float: none;
            border-left: none;
            margin-top: px;
            background-color: #eeeeff;
        }
        ul li ul {
            width: px;
            position: absolute;
            left: px;
            top: px;
            display: none;
        }
    </style>
</head>
<body>
<div id="menu">
    <ul>
        <li><a href="#">首页</a></li>
        <li class="outer"><a href="#">前端学习</a>
            <ul>
                <li><a href="#">HTML</a></li>
                <li><a href="#">CSS</a></li>
                <li><a href="#">JavaScript</a></li>
                <li><a href="#">jQuery</a></li>
            </ul>
        </li>
        <li class="outer"><a href="#">后端学习</a>
            <ul>
                <li><a href="#">HTML</a></li>
                <li><a href="#">CSS</a></li>
                <li><a href="#">JavaScript</a></li>
                <li><a href="#">jQuery</a></li>
            </ul></li>
        <li class="outer"><a href="#">算法学习</a>
            <ul>
                <li><a href="#">HTML</a></li>
                <li><a href="#">CSS</a></li>
                <li><a href="#">JavaScript</a></li>
                <li><a href="#">jQuery</a></li>
            </ul></li>
        <li class="outer"><a href="#">网络学习</a>
            <ul>
                <li><a href="#">HTML</a></li>
                <li><a href="#">CSS</a></li>
                <li><a href="#">JavaScript</a></li>
                <li><a href="#">jQuery</a></li>
            </ul>
        </li>
    </ul>
</div>
</body>
</html>

版本1.3【变幻菜单】代码 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>变幻菜单</title>
    <style type="text/css">
        .outer{
            font-size: px;
            font-weight: bold;
            list-style: none;
            border-bottom: px solid #40e0d0;
            overflow: auto; /*使其包裹整个ul*/
        }
        .outer li{
            float: left;
            margin-right: px;
        }
        .outer li a{
            line-height: px;
            text-decoration: none;
            background: #ddd;
            color: #666666;
            display: block;
            width: px;
            text-align: center;
        }
        .outer li a span {
            display: none;
        }
        .outer li a:hover span{
            display: block;
            color: white;
            background: #40e0d0;
        }
        .outer li a:hover{
            margin-top: -px;
        }
    </style>
</head>
<body>
<ul class="outer">
    <li><a href="#">First<span>天头</span></a></li>
    <li><a href="#">Third<span>书眉</span></a></li>
    <li><a href="#">Forth<span>订口</span></a></li>
    <li><a href="#">Fifth<span>封里</span></a></li>
    <li><a href="#">Sixth<span>书脊</span></a></li>
    <li><a href="#">Second<span>地脚</span></a></li>
</ul>
</body>
</html>

版本1.3【多级菜单】代码 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>多级菜单</title>
    <style type="text/css">
        .outer{
            font-size: px;
            font-weight: bold;
            list-style: none;
        }
        .outer li{
            float: left;
            margin-right: px;
        }
        .outer li a{
            line-height: px;
            text-decoration: none;
            background: #ddd;
            color: #666666;
            display: block;
            width: px;
            text-align: center;
        }
        .outer li a:hover{
            counter: white;
            background: red;
        }
        .outer li ul{
            list-style: none;
            display: none;
            padding: ;
            position: relative;
        }
        .outer li ul li {
            float: none;
        }
        .outer li:hover ul{
            display: block;
        }
        .outer li:hover ul li ul{
            display: none;
        }
        .outer li ul li:hover ul{
            display: block;
            top: ;
            left: px;
            position: absolute;
        }
    </style>
</head>
<body>
<ul class="outer">
    <li><a href="#">First</a></li>
    <li><a href="#">Second</a>
        <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></li>
            <li><a href="#">第三章</a></li>
            <li><a href="#">第四章</a></li>
        </ul>
    </li>
    <li><a href="#">Third</a></li>
    <li><a href="#">Forth</a></li>
    <li><a href="#">Fifth</a></li>
    <li><a href="#">Sixth</a></li>
</ul>
</body>
</html>

jQuery实现动画菜单 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery实现动画菜单</title>
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
    <style type="text/css">
        .outer{
            font-size: px;
            font-weight: bold;
            list-style: none;   /*去掉圆点*/
        }
        .outer li{
            float: left;    /*让菜单横向显示*/
            margin-right: px;  /*让菜单间有1px的间距*/
        }
        .outer li a{
            line-height: px;  /*行高*/
            text-decoration: none;  /*去除下划线*/
            background: #ddd;
            color: #666666;
            display: block;
            width: px;
            text-align: center; /*居中对齐*/
        }
        .outer li ul{
            list-style: none;
            display: none;
            padding: ;
            position: absolute; /*特别注意！！！！！！*/
        }
        .outer li a:hover {
            background: url("materials/grayMulti.png")   repeat-x;
        }
        .note {
            color: #ddd;
            display: block;
            background: url("materials/grayMulti.png")   repeat-x;
        }
        .arrow{
            display: block;
            height: px;
            background: url("materials/arrow.png") px  no-repeat;
        }
    </style>
    <script type="text/javascript">
        $(document).ready(function () {
            $('.outer li').mouseover(function () {
                $(this).find('ul').slideDown('1000');
            });
            $('.outer li').mouseleave(function () {
                $(this).find('ul').slideUp('1000');
            })
        })
    </script>
</head>
<body>
<ul class="outer">
    <li><a href="#"><span class="note">START</span></a></li>
    <li><a href="#">First</a>
        <ul>
            <span class="arrow"></span>
            <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="#">Second</a>
        <ul>
            <span class="arrow"></span>
            <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="#">Third</a>
        <ul>
            <span class="arrow"></span>
            <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="#">Forth</a>
        <ul>
            <span class="arrow"></span>
            <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="#">Fifth</a>
        <ul>
            <span class="arrow"></span>
            <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="#">Sixth</a>
        <ul>
            <span class="arrow"></span>
            <li><a href="#">第一章</a></li>
            <li><a href="#">第二章</a></li>
            <li><a href="#">第三章</a></li>
            <li><a href="#">第四章</a></li>
        </ul>
    </li>
</ul>
</body>
</html>

JS实现动画菜单

  1. onmouseover

     、

    onmouseout

     、

    setTimeOut

     、

    onmouseover

     、

    onmouseleave

     尤其要注意后面两个都是小写！！！
  2. 代码示例； 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> JS实现动画菜单</title>
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
    <style type="text/css">
        .outer{
            font-size: px;
            font-weight: bold;
            list-style: none;   /*去掉圆点*/
        }
        .outer li{
            float: left;    /*让菜单横向显示*/
            margin-right: px;  /*让菜单间有1px的间距*/
        }
        .outer li a{
            line-height: px;  /*行高*/
            text-decoration: none;  /*去除下划线*/
            background: #ddd;
            color: #666666;
            display: block;
            width: px;
            text-align: center; /*居中对齐*/
        }
        .outer li ul{
            list-style: none;
            display: none;
            padding: ;
            position: absolute; /*特别注意！！！！！！*/
            height: ;  /*为移动位置做准备*/
            overflow: hidden; /*隐藏溢出的部分*/
        }
        .outer li a:hover {
            background: url("materials/grayMulti.png")   repeat-x;
        }
        .note {
            color: #ddd;
            display: block;
            background: url("materials/grayMulti.png")   repeat-x;
        }
        .arrow{
            display: block;
            height: px;
            background: url("materials/arrow.png") px  no-repeat;
        }
    </style>
    <script type="text/javascript">
        window.onload = function () {
            var ALi = document.getElementsByTagName('li');
            for(var i=;i<ALi.length;i++){
                ALi[i].onmouseover = function () {
                    var oUl = this.getElementsByTagName('ul')[];
                    if(oUl!=undefined){
                        oUl.style.display = 'block';
                        changeHeight(oUl.id, );
                    }
                };
                ALi[i].onmouseleave = function () {
                    var oUl = this.getElementsByTagName('ul')[];
                    if(oUl!=undefined){
                        changeHeight(oUl.id, -);
                    }
                }
            }
        };
        function changeHeight(id, speed) {
            var aUl = document.getElementById(id);
            var h = aUl.offsetHeight;
            h += speed;
            if(speed>){
                if(h<){
                    aUl.style.height = h + 'px';
                    setTimeout("changeHeight('"+id+"',1)",);
                }
            }else{
                if(h>){
                    aUl.style.height = h + 'px';
                    setTimeout("subHeight('"+id+"',-1)",);
                }else{
                    aUl.style.display = 'none';
                }
            }
        }
        function addHeight(id) {
            var aUl = document.getElementById(id);
            var h = aUl.offsetHeight;
            h += ;
            if(h<){
                aUl.style.height = h + 'px';
                setTimeout("addHeight('"+id+"')",);
            }
        }
        function subHeight(id) {
            var aUl = document.getElementById(id);
            var h = aUl.offsetHeight;
            h -= ;
            if(h>){
                aUl.style.height = h + 'px';
                setTimeout("subHeight('"+id+"')",);
            }else{
                aUl.style.display = 'none';
            }
        }
    </script>
</head>
<body>
<ul class="outer">
    <li><a href="#"><span class="note">START</span></a></li>
    <li><a href="#">First</a>
        <ul id="f">
            <span class="arrow"></span>
            <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="#">Second</a>
        <ul>
            <span class="arrow"></span>
            <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="#">Third</a>
        <ul>
            <span class="arrow"></span>
            <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="#">Forth</a>
        <ul>
            <span class="arrow"></span>
            <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="#">Fifth</a>
        <ul>
            <span class="arrow"></span>
            <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="#">Sixth</a>
        <ul>
            <span class="arrow"></span>
            <li><a href="#">第一章</a></li>
            <li><a href="#">第二章</a></li>
            <li><a href="#">第三章</a></li>
            <li><a href="#">第四章</a></li>
        </ul>
    </li>
</ul>
</body>
</html>

CSS3实现动画菜单

  1. CSS3实现菜单圆角：

    border-radius

    。

    CSS3实现渐变背景：

    linear-gradient

    。

    CSS3实现阴影：

    box-shadow

    。

    CSS3实现透明：

    transition

    。

    CSS3实现尖角：

    before

     。
    1. 代码示例： 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css实现动画菜单</title>
    <style type="text/css">
        .box {
            display: block;
            width: ;
            border-bottom: px solid red;
            border-left: px solid transparent;
            border-top: px solid transparent;
            border-right: px solid transparent;
        }
        .box2 {
            display: block;
            width: ;
            border-bottom: px solid red;
            border-left: px solid green;
            border-top: px solid blue;
            border-right: px solid gray;
        }

        .outer{
            width: px;
            margin: px auto;
            border: px solid #222222;
            background-color: #111;
            background-image: linear-gradient(#,#);   /*渐变背景*/
            border-radius: px; /*圆角*/
            box-shadow:  px px #777;
            padding: ;
            list-style: none;
            zoom: ;    /*清除浮动*/
        }
        /*清除浮动终极！！*/
        .outer:before, .outer:after {
            content: ' ';
            display: table;
        }
        .outer:after {
            clear: both;
        }
        .outer li {
            float: left;
            border-right: px solid #222;
            box-shadow: px   #444;
            position: relative;
        }
        .outer li a {
            float: left;
            padding: px px;
            color: #999;
            font-weight: bold;
            font-size: px;
            text-decoration: none;
            text-shadow:  px  #000;  /*水平距离，垂直距离，模糊距离，颜色*/
        }
        .outer li a:hover {
            color: #fafafa;
        }
        .outer li ul{
            visibility: hidden;
            position: absolute;
            top: px;
            left: ;
            z-index: ;
            padding: ;
            background-color: #444;
            background-image: linear-gradient(#,#);
            box-shadow:  -px  rgba(,,,.);
            border-radius: px;
            opacity: ; /*透明度*/
            margin: px   ;
            transition: all .s ease-in-out;
            _margin:;
        }
        .outer li:hover > ul {
            opacity: ;
            visibility: visible;
            margin: ;
        }
        .outer ul li {
            float: none;
            display: block;
            border: ;
            box-shadow:  px  #111,  px  #666; /*两个阴影叠加形成分割线的效果*/
        }
        .outer ul a {
            padding: px;
            width: px;
            display: block;
            float: none;
            _height: px;
        }
        .outer ul a:hover {
            background-color: #0186ba;
            background-image: linear-gradient(#acec, #ba);
        }
        .outer ul li:first-child > a {
            border-radius: px px  ;
        }
        .outer ul li:last-child > a {
            border-radius:   px px;
        }
        .outer ul li:first-child > a:before {
            content: '';
            position: absolute;
            left: px;
            top: -px;
            border-left: px solid transparent;
            border-right: px solid transparent;
            border-bottom: px solid #444;
        }
        .outer ul li:first-child > a:hover:before {
            border-bottom-color: #04acec;
        }
        .outer ul ul {
            top: ;
            left: px;
            margin:    px;
            box-shadow: -px   rgba(,,,.);
            _margin:;
        }
        .outer ul ul li:first-child a:before{
            left: -px;
            top: %;
            margin-top: -px;
            border-left: ;
            border-bottom: px solid transparent;
            border-top: px solid transparent;
            border-right: px solid transparent;
        }
        .outer ul ul li:first-child a:hover:before{
            border-bottom-color: transparent;
            border-right-color: #0299d3;
        }

    </style>
</head>
<body>

<!--CSS3实现菜单圆角：border-radius-->
<!--CSS3实现渐变背景：linear-gradient-->
<!--CSS3实现阴影：box-shadow-->
<!--CSS3实现透明：transition-->
<!--CSS3实现尖角：before-->

<ul class="outer">
    <li><a href="#">START</a></li>
    <li><a href="#">First</a>
        <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></li>
            <li><a href="#">第三章</a></li>
            <li><a href="#">第四章</a></li>
        </ul>
    </li>
    <li><a href="#">Second</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="#">Third</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="#">Forth</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="#">Fifth</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="#">Sixth</a>
        <ul>
            <li><a href="#">第一章</a></li>
            <li><a href="#">第二章</a></li>
            <li><a href="#">第三章</a></li>
            <li><a href="#">第四章</a></li>
        </ul>
    </li>
</ul>

<div class="box"></div>
<div class="box2"></div>
</body>
</html>
html css jquery
上一篇: 00SEC-D&amp;D数据泄露报警日报【第14期】
下一篇: 新浪微博下拉菜单案例

继续阅读