用display做导航 

<style type="text/css">
        body{
            background-color: black;
        }
        ul{

            font-size: 0;
        }
        #ul1 li{
            list-style: none;
            display:inline-block;
            margin-left: 20px;
            border-radius: 15px;
            border: 1px solid;
            border-color:#f78f73;
            height: 60px;
            font-size: 20px;
            width:80px;
            line-height: 50px;
            text-align: center;
            background-color:#c895e0;
            font-weight: bold;
            color:white;
            box-shadow: 2px 2px 2px #d2c0da;
            -webkit-transition:all 5s ease-in-out;
            position:relative;

        }
        a{
            text-decoration: none;
            color: green;
            -webkit-transition:all 3s ease-in-out;
        }
        #ul1 li:hover a{
            color: white;
        }
       #ul1 li:hover {
            background-color: #fa6ab1;
             border-radius:100%;
            box-shadow: 2px 2px 2px #800473;
        }
        #ul2{
            position: absolute;
            top: 100%;
            left:0px;
            display: none;
        }
        #ul2 li{
            background-color: transparent;
            border: 0;
            width:80px;
        }
        #ul1 li:hover #ul2 {
            display: block;

        }
    </style>
</head>
<body>
    <div>
        <ul id="ul1">
            <li><a href="#">首页</a></li>
            <li><a href="#">搜索</a>
                    <ul id="ul2">
                        <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></li>
        </ul>
    </div>

　　

posted @ 2014-06-22 21:20  木糖醇+杏仁  阅读(271)  评论(1)    收藏  举报