div + css 鼠标 hover 下拉菜单

最新推荐文章于 2021-08-04 10:05:16 发布

太迪

最新推荐文章于 2021-08-04 10:05:16 发布

阅读量150

点赞数

div + css 鼠标 hover 下拉菜单

在这里插入图片描述
源码：


<!DOCTYPE html>
<html lang="en">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<head>
    <meta charset="UTF-8">
    <style type="text/css">
        nav {
            margin:100px auto;
            text-align:center;
        }
        nav ul {
            border-radius:10px;
            background:linear-gradient(to bottom,#efefef,#bbbbbb);
            padding:0 20px;
            display:inline-table;
            position:relative;
            box-shadow:1px 1px 3px #666;
            list-style:none;

        }
        nav ul ul {
            display:none;
            list-style:none;
        }
        nav ul li {
            float:left;
            list-style:none;
        }
        nav ul::after {
            content:"";
            display:block;
            clear:both;
            list-style:none;
        }
        nav ul li a {
            display:block;
            padding:25px 40px;
            color:#000;
            text-decoration:none;
            font-family:"微软雅黑";

        }
        nav ul li:hover > ul {
            display:block;
            list-style:none;
        }
        nav ul li:hover {
            background:linear-gradient(to bottom,#4f5964,#5f6975);
            list-style:none;
        }
        nav ul li:hover a {
            color:#FFF;
        }
        nav ul ul {
            background:#5f6975;
            border-radius:0;
            position:absolute;
            top:100%;
            padding:0;
            list-style:none;
        }
        nav ul ul li {
            float:none;
            border-top:1px solid #6b727c;
            border-bottom:1px solid #575f6a;
            list-style:none;
        }
        nav ul ul li a {
            color:#FFF;
        }
        nav ul ul li a:hover {
            background:#4b545f;
        }
        nav ul ul ul {
            width:100%;
            position:absolute;
            left:100%;
            top:50%;
            list-style:none;
        }

    </style>


</head>


<body>
<nav>
    <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>
            <ul>
                <li><a href="#">二级导航</a></li>
                <li><a href="#">二级导航</a></li>
                <li><a href="#">二级导航</a>
                    <ul>
                        <li><a href="#">三级导航</a></li>
                        <li><a href="#">三级导航</a></li>
                        <li><a href="#">三级导航</a></li>
                    </ul>
                </li>
                <li><a href="#">二级导航</a></li>
            </ul>
        </li>
        <li><a href="#">导航四</a>
            <ul>
                <li><a href="#">二级导航</a></li>
                <li><a href="#">二级导航</a></li>
                <li><a href="#">二级导航</a></li>
            </ul>
        </li>
        <li><a href="#">导航五</a>
            <ul>
                <li><a href="#">二级导航</a></li>
                <li><a href="#">二级导航</a></li>
            </ul>
        </li>
        <li><a href="#">导航六</a></li>
    </ul>
</nav>

</body>
</html>

太迪

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
div + css 鼠标 hover 下拉菜单

div + css 鼠标 hover 下拉菜单源码：<!DOCTYPE html><html lang="en"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"><head&gt...
复制链接

扫一扫