用纯CSS实现二级下拉菜单 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>用纯CSS实现二级下拉菜单</title>
    <style type="text/css">
        <!--
        *{
            margin:0;
            padding:0;
            border:0;
        }
        body {
            font-size:12px;
        }
        .box{
            width:100%;
            height:30px;
            text-align:center;
            background-color: #b8fff7;

        }
        #nav {
            width:auto;
            height:30px;
            line-height: 30px;
            list-style-type: none;
            display:inline-block;   /*当ul没有设置宽度时，要
            想让ul水平居中，那么就设置display:inline-block，
            同时它的父元素要设置text-align:center;属性*/
        }
        #nav li {
            background-color: #54ea61;
            float: left;
            width: 150px;
        }
        #nav li a {
            display: block;
            width: 100%;
            text-align:center;
            text-decoration:none;
            color: #bc2c27;
        }
        #nav li a:hover  {
            color:#FFF;
            text-decoration:none;
            font-weight:bold;
            background:#999;
        }
        #nav li ul {
            line-height: 30px;
            list-style-type: none;
            text-align:center;
            width: 100%;
            display:none;
        }
        #nav li ul li{
            width: 100%;
            background: #F6F6F6;
        }
        #nav li ul li a{
            display: block;
            width: 100%;
            text-align:center;
        }
        #nav li ul li a:hover  {
            color:#F3F3F3;
            text-decoration:none;
            background:#C00;
        }
        #nav li:hover ul {
            display:block;
        }
    </style>
</head>
<body>
    <div class="box">
        <ul id="nav">
            <li>
                <a href="/">模板无忧</a>
                <ul>
                    <li><a href="/other/top100.shtml">最新下载</a></li>
                    <li><a href="/other/top100.shtml">下载排行</a></li>
                    <li><a href="/other/lastupdate.shtml">最新更新</a></li>
                </ul>
            </li>
            <li>
                <a href="/sort/list_7_1.shtml">电子书籍</a>
                <ul>
                    <li class=""><a href="/sort/list_7_228_1.shtml">AJAX教程</a></li>
                    <li class=""><a href="/sort/list_7_132_1.shtml">CSS教程</a></li>
                    <li><a href="/sort/list_7_136_1.shtml">JAVA教程</a></li>
                </ul>
            </li>
            <li>
                <a href="/sort/list_5_1.shtml">JAVA</a>
                <ul>
                    <li class=""><a href="/sort/list_5_80_1.shtml">游戏源码</a></li>
                    <li><a href="/sort/list_5_101_1.shtml">初学实例</a></li>
                </ul>
            </li>
        </ul>
    </div>
</body>
</html>

　　

posted on 2015-12-20 23:33  冬刻忆  阅读(148)  评论(0)    收藏  举报