如何用hover实现下拉菜单

最新推荐文章于 2024-08-31 22:15:20 发布

魍-

最新推荐文章于 2024-08-31 22:15:20 发布

阅读量3.8k

点赞数 4

分类专栏： css 文章标签： css hover 下拉菜单

css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

作为初学者的一点积累

<!Doctype html>
<html>

    <head>
        <meta charset="utf-8">
        <title>无标题文档</title>
        <style type="text/css">
            div,ul,span,li {
                padding: 0;
                margin: 0;
            }

            .nav {
                width: 960px;
                background-color: #FF519D;
                height: 30px;
            }
            .nav ul li {
                float: left;
                list-style-type: none;
                width: 80px;
            }
            .nav ul li a {
                color: #FFF;
                text-decoration: none;
                display: block;
            }
            .nav ul li a:hover {
                color: #FFF;
                background-color: #FFA7CD;
            }
            .nav li {
                line-height: 30px;
                text-align: center;
            }
            .nav ul li span{
                display: none;
                text-decoration: none;
                position: absolute;
                width: 80px;
            }
            .nav span ul li a{
                background-color: #FF0000;
            }
            .nav ul li:hover span {
                display: block;
                text-decoration: none;
            }
        </style>
    </head>

    <body>
        <div id="sunav" class="nav">
            <ul>
            <li class="sunav"><a href="#">首页</a>
                <span>
                <ul>
                    <li><a href="#">首页</a></li>
                    <li><a href="#">下拉列表1</a></li>
                    <li><a href="#">下拉列表2</a></li>
                </ul>
                </span>
            </li>
            <li class="sunav"><a href="#">下拉列表1</a>
                <span>
                <ul>
                    <li><a href="#">首页</a></li>
                    <li><a href="#">下拉列表1</a></li>
                    <li><a href="#">下拉列表2</a></li>
                </ul>
                </span>
            </li>
            <li class="sunav"><a href="#">下拉列表2</a>
                <span>
                <ul>
                    <li><a href="#">首页</a></li>
                    <li><a href="#">下拉列表1</a></li>
                    <li><a href="#">下拉列表2</a></li>
                </ul>
                </span>
            </li>
            </ul>
        </div>
        <div class="nav">
            <ul>
            <li class="sunav"><a href="#">首页</a>
                <span>
                <ul>
                    <li><a href="#">首页</a></li>
                    <li><a href="#">下拉列表1</a></li>
                    <li><a href="#">下拉列表2</a></li>
                </ul>
                </span>
            </li>
            <li class="sunav"><a href="#">下拉列表1</a>
                <span>
                <ul>
                    <li><a href="#">首页</a></li>
                    <li><a href="#">下拉列表1</a></li>
                    <li><a href="#">下拉列表2</a></li>
                </ul>
                </span>
            </li>
            <li class="sunav"><a href="#">下拉列表2</a>
                <span>
                <ul>
                    <li><a href="#">首页</a></li>
                    <li><a href="#">下拉列表1</a></li>
                    <li><a href="#">下拉列表2</a></li>
                </ul>
                </span>
            </li>
            </ul>
        </div>
    </body>

</html>

效果图

本文转自前端网gousky，仅作为学习过程中的积累

魍-

关注

4
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
如何用hover实现下拉菜单

作为初学者的一点积累<!Doctype html><html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style type="text/css"> div,ul,span,li { padding: 0;
复制链接

扫一扫

专栏目录