web前端实战系列[4]——多级菜单

1.代码

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>三级菜单</title>

    <style type="text/css">
        .top-nav{ font-family: "Microsoft Yahei"; font-size: 12px; font-weight: bold;list-style: none;  margin: 0 auto;padding: 0 auto;}
        .top-nav li{ float:left; margin-right: 1px; }
        .top-nav li a{ line-height: 20px; text-decoration: none; background-color: #eee; color: #666;display: block; width: 80px; text-align: center;}
        .top-nav li ul{ display: none; list-style: none; padding:0;position:relative; }/*最后一句解决了二级菜单和一级菜单没对齐的问题*/
        /*鼠标移动到超链接上菜单变色*/
        .top-nav li a:hover{background-color:blue; color:white; }
        /*鼠标移动到一级菜单的时候要显示二级菜单*/
        .top-nav li:hover ul{ display: block; width: 80px; background-color: #827bdd; }
        /*二级菜单显示的时候需要隐藏三级菜单*/
        .top-nav li:hover ul li ul{ display: none; }
        /*三级菜单在二级菜单范围内浮动*/
        .top-nav li ul li:hover ul{ display: block; top:0; left:81px; position: absolute;}
    </style>

</head>
<body>
    <ul class="top-nav">
        <li class="firstMenu"><a href="#">首页</a></li>
        <li class="firstMenu"><a href="#">课程大厅+</a>
            <ul>
                <li><a href="#">前端+</a>
                    <ul>
                        <li><a href="#">JavaScript</a></li>
                        <li><a href="#">JQuery</a></li>
                        <li><a href="#">CSS</a></li>
                    </ul>
                </li>
                <li><a href="#">后台</a></li>
                <li><a href="#">手机</a>
                    <ul>
                        <li><a href="#">Android开发</a></li>
                        <li><a href="#">IOS开发</a></li>
                    </ul>
                </li>
            </ul>

        </li>
        <li class="firstMenu"><a href="#">学习中心+</a>
            <ul>
                <li><a href="#">视频学习</a></li>
                <li><a href="#">案例学习</a></li>
                <li><a href="#">交流平台</a></li>
            </ul>
        </li>
        <li class="firstMenu"><a href="#">经典案例</a></li>
        <li class="firstMenu"><a href="#">关于我们</a></li>
    </ul>
</body>
</html>

 

2.总结

1).去列表前面的圆点：list-style:none.
2).怎么让二级菜单竖着排列？加width。

posted @ 2016-01-24 20:54  叶莜落  阅读(586)  评论(0)  编辑  收藏  举报