渐变下拉导航

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>渐变下拉导航</title>
</head>
<style type="text/css">
    *{
        margin: 0;
        padding: 0;
        color: #fff;
    }
    #nav,#nav ul{
        list-style: none;
    }
    #nav{
        font-family: "华文行楷";
        font-size: 18px;
        margin: 40px auto;
        width: 762px;
        height: 36px;
        box-shadow: 0 0px 20px #0fc;
        line-height: 34px;
        background-image: -webkit-gradient(linear,0 50%,100% 50%,from(#0fc),to(rgb(255, 102, 238)));
        border-radius: 50%;

    }
    #nav>li{
        float: left;
        margin: 0 auto;
        position:relative;
        height: 36px;
        width: 106px;
        display: block;
        border-radius: 50%;

    }
    #nav > li:first-child{
        margin-left:94px;
    }
    #nav ul{
        position: absolute;
        left: -9999px;
        top: -9999px;
    }
    #nav ul li{
        float: right;
        border-radius: 50%;
        line-height: 42px;
        width: 44px;
        height: 42px;
        box-shadow: 8px 9px 2px 0px #0fc;
        margin: 4px;
        background-image: -webkit-gradient(linear,76% 76%,32% 100%,from(#0fc),to(rgb(255, 102, 238)));
    }
    #nav ul li a{
        padding-left: 3px;
    }
    a{
        text-decoration: none;
    }
    #nav li:hover ul{
        left: 0px;
        top:34px;
        width:106px;
    }

    #nav ul li:hover{
        -webkit-animation-name:zoomFontSize;
        -webkit-animation-duration:1s;
        -webkit-animation-direction:normal;
    }
    @-webkit-keyframes "zoomFontSize"{
        0% {font-size: 100%;}
        25% {font-size: 75%;}
        50% {font-size: 50%;}
        75% {font-size: 75%;}
        100% {font-size: 100%;}
    }
</style>
<body>
    <ul id="nav">
        <li><a href="http://www.cnblogs.com/Harold-Hua/">叹世</a>
            <ul>
                <li><a href="http://www.cnblogs.com/Harold-Hua/">叹世</a></li>
                <li><a href="http://www.cnblogs.com/Harold-Hua/">叹世</a></li>
                <li><a href="http://www.cnblogs.com/Harold-Hua/">叹世</a></li>
                <li><a href="http://www.cnblogs.com/Harold-Hua/">叹世</a></li>
                <li><a href="http://www.cnblogs.com/Harold-Hua/">叹世</a></li>
            </ul>
        </li>

        <li><a href="http://www.cnblogs.com/Harold-Hua/">残者</a>
            <ul>
                <li><a href="http://www.cnblogs.com/Harold-Hua/">残者</a></li>
                <li><a href="http://www.cnblogs.com/Harold-Hua/">残者</a></li>
                <li><a href="http://www.cnblogs.com/Harold-Hua/">残者</a></li>
                <li><a href="http://www.cnblogs.com/Harold-Hua/">残者</a></li>
                <li><a href="http://www.cnblogs.com/Harold-Hua/">残者</a></li>
            </ul>
        </li>
        <li><a href="http://www.cnblogs.com/Harold-Hua/">华帅</a>
            <ul>
                <li><a href="http://www.cnblogs.com/Harold-Hua/">华帅</a></li>
                <li><a href="http://www.cnblogs.com/Harold-Hua/">华帅</a></li>
                <li><a href="http://www.cnblogs.com/Harold-Hua/">华帅</a></li>
                <li><a href="http://www.cnblogs.com/Harold-Hua/">华帅</a></li>
                <li><a href="http://www.cnblogs.com/Harold-Hua/">华帅</a></li>
            </ul>
        </li>
        <li><a href="http://www.cnblogs.com/Harold-Hua/">叹世</a>
            <ul>
                <li><a href="http://www.cnblogs.com/Harold-Hua/">叹世</a></li>
                <li><a href="http://www.cnblogs.com/Harold-Hua/">叹世</a></li>
                <li><a href="http://www.cnblogs.com/Harold-Hua/">叹世</a></li>
                <li><a href="http://www.cnblogs.com/Harold-Hua/">叹世</a></li>
                <li><a href="http://www.cnblogs.com/Harold-Hua/">叹世</a></li>
            </ul>
        </li>
        <li><a href="http://www.cnblogs.com/Harold-Hua/">残者</a>
            <ul>
                <li><a href="http://www.cnblogs.com/Harold-Hua/">残者</a></li>
                <li><a href="http://www.cnblogs.com/Harold-Hua/">残者</a></li>
                <li><a href="http://www.cnblogs.com/Harold-Hua/">残者</a></li>
                <li><a href="http://www.cnblogs.com/Harold-Hua/">残者</a></li>
                <li><a href="http://www.cnblogs.com/Harold-Hua/">残者</a></li>
            </ul>
        </li>
        <li><a href="http://www.cnblogs.com/Harold-Hua/">华帅</a>
            <ul>
                <li><a href="http://www.cnblogs.com/Harold-Hua/">华帅</a></li>
                <li><a href="http://www.cnblogs.com/Harold-Hua/">华帅</a></li>
                <li><a href="http://www.cnblogs.com/Harold-Hua/">华帅</a></li>
                <li><a href="http://www.cnblogs.com/Harold-Hua/">华帅</a></li>
                <li><a href="http://www.cnblogs.com/Harold-Hua/">华帅</a></li>
            </ul>
        </li>
    </ul>
</body>
</html>

 

posted @ 2016-03-07 13:37  嘆世殘者——華帥  阅读(204)  评论(0)    收藏  举报