Css学习日记:导航第二版样式

再次更新了一下导航的CSS,代码如下,演示如我。

/* 导航 */

#topMenu,
.search_close {
    float: center;
    cursor: pointer;
    height: 36px;
    margin: 50px 0 0 -10px;
    padding: 6px;
    position: relative;
}

    #topMenu ul {
        display: block;
        line-height: 36px;
        margin: 0 0 0 -10px;
        background:#fff;
    }

        #topMenu ul li {
            display: inline;
            font-size: 16px;
            position: relative;
            padding: 0 0 15px 0;
        }

            #topMenu ul li ul {
                display: none;
            }

            #topMenu ul li:hover ul {
                display: block;
                position: absolute;
                top: 26px;
                left: 10px;
                width: 100px;
                line-height: 32px;
                animation: nav_ul .6s;
            }
            @keyframes nav_ul {0%{opacity:0;transform: translateX(20px);} 100%{opacity:1;}}

                #topMenu ul li:hover ul li a {
                    display: block;
                    width: 100%;
                    border-radius: 0;
                    padding: 0 10px;
                    background: none;
                    color: #708090;
                }

                #topMenu ul li:hover ul li:hover a {
                    display: block;
                    width: 100%;
                    border-radius: 0;
                    background: #f55;
                    color: #fff;
                }

            #topMenu ul li a {
                padding: 4px 10px;
                color: #666;
            }

            #topMenu ul li:hover a {
                color: #fff;
                background: #708090;
                border-radius: 30px;
            }

    #topMenu .i_1,
    #topMenu .i_2,
    .search_close:before,
    .search_close:after {
        content: "";
        position: absolute;
    }

    #topMenu.menu_close .i_2,
    .search_close:after {
        top:11px;
        transform: rotate(-45deg);
        -webkit-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        -o-transform: rotate(-45deg);
        -moz-transform: rotate(-45deg);
    }

    #topMenu.menu_close .i_1,
    .search_close:before {
        top: 12px;
        transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
    }

💫 评论卡