纯CSS实现SuckerFish二级（下拉）菜单

纯CSS实现SuckerFish二级（下拉）菜单

HTML页面boby部分

<ul class="nav">
        <li>
            <a href="">手    机</a>
            <ul>
                <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>
            <ul>
                <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>
            <ul>
                <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>
            <ul>
                <li><a href="">手    机</a></li>
                <li><a href="">笔记本</a></li>
                <li><a href="">图书音像</a></li>
                <li><a href="">服装鞋帽</a></li>
            </ul>
        </li>
    </ul>

---

CSS样式style部分
<style type="text/css">
* {
    margin:0px;
}

ul {
    list-style-type:none;
    padding:0px;
    margin:0px;
}



.nav>li {
    float:left;
}

a {
    display:block;
    width:100px;
    height:26px;
    border: 1px solid #e4393c;
    line-height:26px;
    background-color:#e4393c;
    color: #fff;
    font-size: 15px;
    font-family: '微软雅黑';
    text-align:center;
    text-decoration:none;
}

a:hover {
    background-color:#F7F7F7;
    color:#e4393c;
}

/*第一步 让li下所有的ul先隐藏*/
li>ul {
    position:relative;
    left:999em;
}

/*第二步 让鼠标悬浮的li下的ul显示出来*/
.nav>li:hover>ul {
    left:auto;
}
</style>

这样即实现了简单的二级菜单（CSS）。

参考W3School