CSS3方式实现动画菜单

淡淡的烟草味﹌ 2022-01-27 12:07 186阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <script src="js/jquery-3.4.1.min.js"></script>
        <title>三级菜单</title>
        <script>
    
        </script>
        
        <style>
            .top-nav {
                width: 960px;
                margin: 60px auto;
                /* 边框 实线 */
                border: 1px solid #222;
                background-color: #111;
                /* 渐变 */
                background-image: linear-gradient(#444, #111);
                /* 圆角 */
                border-radius: 6px;
                /* 阴影 */
                box-shadow: 0 1px 1px #777;
                padding: 0;
                /* 去小圆点 */
                list-style: none;
            }
    
            /* 清除浮动 */
            .top-nav :before,
            .top-nav:after {
                content: " ";
                display: table;
            }
            .top-nav:after {
                clear: both;
            }
            /* 强制刷新框架 */
            .top-nav {
                zoom: 1;
            }
    
    
            .top-nav li {
                float: left;
                border-right: 1px solid #222;
                box-shadow: 0 1px 1px #444;
                position: relative;
            }
    
            /* 二级菜单 */
            .top-nav li a {
                float: left;
                padding: 12px 30px;
                color: #999;
                /* 字体 */
                font: bold 12px;
                /* 去除下划线 */
                text-decoration: none;
                /* 文本阴影 */
                text-shadow: 0 1px 0px #000;
    
            }
    
            .top-nav li a:hover {
                color: #fafafa;
            }
    
            .top-nav li ul {
                display: none;
                position: absolute;
                list-style: none;
                top: 38px;
    
                /* opacity: 0; */
                z-index: 1;
                left: 0;
                box-shadow: 0 -1 0 rgba(255, 255, 255, 0.3);
                background-image: linear-gradient(#444, #111);
                padding: 0px;
                border-radius: 3px;
                background-color: #444;
                margin: 20px 0 0 0;
                transition: all 0.2s ease-in-out;
               
            }
    
    
            .top-nav li:hover>ul {
                display: block;
                margin: 0;
            }
    
            .top-nav ul li {
                left: 0;
                float: none;
                display: block;
                border: 0;
                box-shadow: 0 1px #111, 0 2px 0 #666;
                margin: 0;
    
            }
    
            .top-nav ul a {
                padding: 10px;
                width: 130px;
                float: none;
                display: block;
    
            }
    
            .top-nav ul li:first-child>a {
                border-radius: 3px 3px 0 0;
            }
    
            .top-nav ul li:last-child>a {
                border-radius: 0 0 3px 3px;
            }
    
            .top-nav ul li:first-child > a:before{
                content: " ";
                position: absolute;
                left: 40px;
                top: -6px;
                border-left: 6px solid transparent;
                border-right: 6px solid transparent;
                border-bottom: 6px solid #444;
            }
            .top-nav ul li:first-child > a :hover:before{
                border-bottom-color: #04acec;
            }
            .top-nav ul ul {
                left:150px;
                top: 0;
                margin: 0 0 0 20px;
                box-shadow: -1px 0 0 rgba(255, 255, 255, 0.3);
                
    
            }
            .top-nav ul ul li:first-child > a:before{
                content: " ";
                left: -6px;
                top:40%;
                border-left: 0;
                border-top: 6px solid transparent;
                border-right: 6px solid #444;
                border-bottom: 6px solid transparent;
            }
            .top-nav ul ul li:first-child a:hover:before{
                border-right-color: #04acec;
                border-bottom-color: transparent;
            }
            .top-nav ul li:first-child a:hover:before{
                border-bottom-color: #04acec;
                
            }
            .top-nav ul li a:hover {
                background-color:  #04acec;
            }
        </style>
    </head>
    
    <body>
        <div id="top">
            <ul class="top-nav">
                <li><a href="#">首页</a></li>
                <li><a href="#">课程大厅</a></li>
                <li><a href="#">学习中心</a>
                    <ul>
                        <li><a href="#">前端课程</a>
                            <ul>
                                <li><a href="#">JavaScript</a></li>
                                <li><a href="#">jQuery</a></li>
                                <li><a href="#">Angular</a></li>
                            </ul>
                        </li>
                        <li><a href="#">后端课程</a></li>
                        <li><a href="#">移动开发</a></li>
                    </ul>
                </li>
                <li><a href="#">经典案例</a></li>
                <li><a href="#">关于我们</a></li>
            </ul>
        </div>
    </body>
    
    </html>