经典的 div + css 鼠标 hover 下拉菜单

骑猪看日落 2022-04-18 02:35 447阅读 0赞

### 经典的 div + css 鼠标 hover 下拉菜单 ###

效果图：

![1483449-20181104185155190-1995357583.gif][]

源码：

<html>
    
    <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>

[1483449-20181104185155190-1995357583.gif]: /images/20220418/4acfd7a4695c47dda005ba0651d85122.png