下拉菜单思路及实现

最新推荐文章于 2022-04-11 11:04:13 发布

sundaxiao

最新推荐文章于 2022-04-11 11:04:13 发布

阅读量922

点赞数 2

分类专栏： HTML CSS 文章标签： css html jquery

本文链接：https://blog.csdn.net/sunxiaofre/article/details/59648601

版权

HTML 同时被 2 个专栏收录

15 篇文章 0 订阅

订阅专栏

CSS

10 篇文章 0 订阅

订阅专栏

制作思路

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

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

项目列表：<ul><li></li></ul>标签
链接：<a>标签
浮动：float
display:block
元素的定位：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: 0;
            padding: 0;
        }
        #menu {
            background-color: #eee;
            width: 600px;
            height: 40px;
            margin: 0 auto;
        }
        ul {
            list-style: none;   /**/
        }
        ul li {
            float: left;    /*让列表横向显示*/
            line-height: 40px; /*垂直居中*/
            text-align: center; /*水平居中*/
            position: relative; /*将下拉菜单放在指定位置第二步，让子菜单针对此菜单进行定位，而不是针对浏览器定位*/

        }
        ul li:hover ul{
            display: block; /*其次，鼠标划过时下拉菜单显示*/
        }
        ul li ul {
            position: absolute; /*将下拉菜单放在指定位置第一步*/
            left: 0;    /*绝对absolute定位要配合left和top使用*/
            top: 40px;
            display: none;      /*首先，下拉菜单隐藏*/
        }
        ul li ul li {
            float: none;    /*子列表竖向显示*/
            background-color: #eeeeee;
            margin-top: 2px;
            border: 1px solid #ff1212;
        }
        a {
            padding: 0 20px;    /*让宽度自适应文字大小*/
            text-decoration: none;   /*取消链接下划线*/
            color: #000;
            display: block; /*将a标签变为块级元素*/
            height: 40px;
        }
        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实现】代码

onmouseover、onmouseout、getElementsById、this
代码如下：

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

$(function(){})、children()、show()、hide()
代码如下：

<!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: 0;
            padding: 0;
        }
        #menu {
            background-color: #eeeeff;
            width: 600px;
            height: 40px;
            margin: 0 auto;
        }
        ul {
            list-style: none;
        }
        ul li {
            float:left;
            line-height: 40px;
            text-align: center;
            position: relative;
        }
        a {
            text-decoration: none;
            color: #000;
            display: block;
            width: 90px;
        }
        a:hover {
            color: #FFFFFF;
            background-color: #666666;
        }
        ul li ul li {
            float: none;
            border-left: none;
            margin-top: 2px;
            background-color: #eeeeff;
        }
        ul li ul {
            width: 90px;
            position: absolute;
            left: 0px;
            top: 40px;
            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: 12px;
            font-weight: bold;
            list-style: none;
            border-bottom: 8px solid #40e0d0;
            overflow: auto; /*使其包裹整个ul*/
        }
        .outer li{
            float: left;
            margin-right: 1px;
        }
        .outer li a{
            line-height: 40px;
            text-decoration: none;
            background: #ddd;
            color: #666666;
            display: block;
            width: 80px;
            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: -40px;
        }
    </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: 12px;
            font-weight: bold;
            list-style: none;
        }
        .outer li{
            float: left;
            margin-right: 1px;
        }
        .outer li a{
            line-height: 40px;
            text-decoration: none;
            background: #ddd;
            color: #666666;
            display: block;
            width: 80px;
            text-align: center;
        }
        .outer li a:hover{
            counter: white;
            background: red;
        }
        .outer li ul{
            list-style: none;
            display: none;
            padding: 0;
            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: 0;
            left: 80px;
            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: 20px;
            font-weight: bold;
            list-style: none;   /*去掉圆点*/
        }
        .outer li{
            float: left;    /*让菜单横向显示*/
            margin-right: 1px;  /*让菜单间有1px的间距*/
        }
        .outer li a{
            line-height: 60px;  /*行高*/
            text-decoration: none;  /*去除下划线*/
            background: #ddd;
            color: #666666;
            display: block;
            width: 100px;
            text-align: center; /*居中对齐*/
        }
        .outer li ul{
            list-style: none;
            display: none;
            padding: 0;
            position: absolute; /*特别注意！！！！！！*/
        }
        .outer li a:hover {
            background: url("materials/grayMulti.png") 0 0 repeat-x;
        }
        .note {
            color: #ddd;
            display: block;
            background: url("materials/grayMulti.png") 0 0 repeat-x;
        }
        .arrow{
            display: block;
            height: 40px;
            background: url("materials/arrow.png") 30px 0 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实现动画菜单

onmouseover、onmouseout、setTimeOut、onmouseover、onmouseleave尤其要注意后面两个都是小写！！！
代码示例；

<!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: 20px;
            font-weight: bold;
            list-style: none;   /*去掉圆点*/
        }
        .outer li{
            float: left;    /*让菜单横向显示*/
            margin-right: 1px;  /*让菜单间有1px的间距*/
        }
        .outer li a{
            line-height: 60px;  /*行高*/
            text-decoration: none;  /*去除下划线*/
            background: #ddd;
            color: #666666;
            display: block;
            width: 100px;
            text-align: center; /*居中对齐*/
        }
        .outer li ul{
            list-style: none;
            display: none;
            padding: 0;
            position: absolute; /*特别注意！！！！！！*/
            height: 0;  /*为移动位置做准备*/
            overflow: hidden; /*隐藏溢出的部分*/
        }
        .outer li a:hover {
            background: url("materials/grayMulti.png") 0 0 repeat-x;
        }
        .note {
            color: #ddd;
            display: block;
            background: url("materials/grayMulti.png") 0 0 repeat-x;
        }
        .arrow{
            display: block;
            height: 40px;
            background: url("materials/arrow.png") 30px 0 no-repeat;
        }
    </style>
    <script type="text/javascript">
        window.onload = function () {
            var ALi = document.getElementsByTagName('li');
            for(var i=0;i<ALi.length;i++){
                ALi[i].onmouseover = function () {
                    var oUl = this.getElementsByTagName('ul')[0];
                    if(oUl!=undefined){
                        oUl.style.display = 'block';
                        changeHeight(oUl.id, 1);
                    }
                };
                ALi[i].onmouseleave = function () {
                    var oUl = this.getElementsByTagName('ul')[0];
                    if(oUl!=undefined){
                        changeHeight(oUl.id, -1);
                    }
                }
            }
        };
        function changeHeight(id, speed) {
            var aUl = document.getElementById(id);
            var h = aUl.offsetHeight;
            h += speed;
            if(speed>0){
                if(h<100){
                    aUl.style.height = h + 'px';
                    setTimeout("changeHeight('"+id+"',1)",10);
                }
            }else{
                if(h>0){
                    aUl.style.height = h + 'px';
                    setTimeout("subHeight('"+id+"',-1)",10);
                }else{
                    aUl.style.display = 'none';
                }
            }
        }
        function addHeight(id) {
            var aUl = document.getElementById(id);
            var h = aUl.offsetHeight;
            h += 1;
            if(h<100){
                aUl.style.height = h + 'px';
                setTimeout("addHeight('"+id+"')",10);
            }
        }
        function subHeight(id) {
            var aUl = document.getElementById(id);
            var h = aUl.offsetHeight;
            h -= 1;
            if(h>0){
                aUl.style.height = h + 'px';
                setTimeout("subHeight('"+id+"')",10);
            }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实现动画菜单

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: 0;
            border-bottom: 10px solid red;
            border-left: 10px solid transparent;
            border-top: 10px solid transparent;
            border-right: 10px solid transparent;
        }
        .box2 {
            display: block;
            width: 0;
            border-bottom: 10px solid red;
            border-left: 10px solid green;
            border-top: 10px solid blue;
            border-right: 10px solid gray;
        }

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