一个简单的网页二级菜单

发表于 | 分类于 |
| 字数统计: 300 | 阅读时长 ≈ 1

前言

网页二级菜单十分常见，我学习到了写法，以下是我写的一个简单的demo当作练习，以及原理说明。

CSS代码

1
2
3
4
5
6
7
8
9
10
11
12
13
.menu{
    list-style: none;
}
.menu>li{
    float: left;
}
li>ul{
    display: none;

}
.menu>li:hover>ul{
    display: block;
}

实现二级菜单的主要原理部分还是在css部分，先将所有的二级菜单的内容通过display隐藏，当鼠标经过一级菜单则将二级菜单的内容显示出来。

html代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<body>
    <ul class="menu">
        <li><a href="#">菜单一</a>
            <ul>
                <li>测试a1</li>
                <li>测试a2</li>
                <li>测试a3</li>
            </ul>
        </li>
        <li>
            <a href="#">菜单二</a>
            <ul>
                <li>测试b1</li>
                <li>测试b2</li>
                <li>测试b3</li>
            </ul>
        </li>
        <li>
            <a href="#">菜单三</a>
            <ul>
                <li>测试c1</li>
                <li>测试c2</li>
                <li>测试c3</li>
            </ul>
        </li>
    </ul>
</body>

效果图

>

-------------本文结束感谢您的阅读-------------
分享到： 收藏夹 复制网址 邮件 微信 QQ空间 腾讯微博 豆瓣 一键分享 更多