HTML实例之下拉菜单

效果如下：

当鼠标位于学院概况/学科建设/教师园地/学生园地中的任意一个时，弹出相应的下拉菜单。

基本思路：

使用列表ul和li实现总体布局，通过li嵌套ul实现下拉菜单。

html代码如下：

<div id="menuList">
        <ul>
            <li>
                <a>学院概况</a>
                <ul>
                    <li>学院简介</li>
                    <li>专业分类</li>
                </ul>
            </li>
            <li>
                <a>学科建设</a>
                <ul>
                    <li>学院简介</li>
                    <li>专业分类</li>
                </ul>
            </li>
            <li>
                <a>教师园地</a>
                <ul>
                    <li>学院简介</li>
                    <li>专业分类</li>
                </ul>
            </li>
            <li>
                <a>学生园地</a>
                <ul>
                    <li>学院简介</li>
                    <li>专业分类</li>
                </ul>
            </li>
        </ul>
    </div>

效果如下：
这里写图片描述

通过对第一层ul设置float属性，让第一行水平摆放

css代码如下：

body,div,ul,li{
            margin: 0;
            padding: 0;
        }
        ul{
            list-style: none;
        }
        #menuList{
            margin:20px;
        }
        #menuList>ul{
            background-color: gray;
            padding-left: 50px;
        }
        #menuList>ul>li{
            float: left;
            padding: 5px;
            border-left: solid 1px black;
            cursor: pointer;
        }

效果如下：
这里写图片描述

第一层ul的背景色似乎没有作用，具体原因查看上一篇“HTML之ul背景色”，在</ul>前面加入一个清除浮动的div，即<div style=”clear: both;”></div>

效果如下：

背景色正常显示，但内层的ul似乎也被背景色包围，但我们需要它不占用上层ul的空间，可以通过设置position属性。

在 #menuList>ul>li中添加 position: relative;属性，同时在 #menuList ul li ul中添加 position: absolute; background-color: #ccc; 属性，使得第二层ul脱离文档流，不占用第一层的空间。

第二层ul的宽度不够，添加属性，给li同样设置5px的padding。

#menuList ul li ul li{
            padding: 5px;
            cursor: pointer;
        }

效果如下：
这里写图片描述

第二层ul的左边多了一些空白，且上部突出了一部分，调试发现其是与上层的a标签对齐的。由于其是绝对定位的，设置left属性和top属性使其相对于父标签li定位。

css代码如下：

#menuList ul li ul{
            position: absolute;
            background-color: #ccc;
            left:0;
            top: 100%;
        }

效果如下：
这里写图片描述

最后，设置第二层ul的display属性，使其隐藏；同时设置第一层li的hover属性，使得鼠标移动到其上时修改第二层ul的属性

css代码如下：

#menuList>ul>li:hover ul{
            display: block;
        }
        #menuList ul li ul{
            position: absolute;
            display: none;
            background-color: #ccc;
            left:0;
            top: 100%;
        }

**大功告成！**

**最后附上完整源码**

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>下拉菜单</title>
    <style type="text/css">
        body,div,ul,li{
            margin: 0;
            padding: 0;
        }
        ul{
            list-style: none;
        }
        #menuList{
            margin:20px;
        }
        #menuList>ul{
            background-color: gray;
            padding-left: 50px;
        }
        #menuList>ul>li{
            float: left;
            padding: 5px;
            border-left: solid 1px black;
            position: relative;
            cursor: pointer;
        }
        #menuList>ul>li:hover ul{
            display: block;
        }
        #menuList ul li ul{
            position: absolute;
            display: none;
            background-color: #ccc;
            left:0;
            top: 100%;
        }
        #menuList ul li ul li{
            padding: 5px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div id="menuList">
        <ul>
            <li>
                <a>学院概况</a>
                <ul>
                    <li>学院简介</li>
                    <li>专业分类</li>
                </ul>
            </li>
            <li>
                <a>学科建设</a>
                <ul>
                    <li>学院简介</li>
                    <li>专业分类</li>
                </ul>
            </li>
            <li>
                <a>教师园地</a>
                <ul>
                    <li>学院简介</li>
                    <li>专业分类</li>
                </ul>
            </li>
            <li>
                <a>学生园地</a>
                <ul>
                    <li>学院简介</li>
                    <li>专业分类</li>
                </ul>
            </li>
            <div style="clear: both;"></div>
        </ul>
    </div>

</body>
</html>

HTML实例之下拉菜单

猜你喜欢