二级菜单

菜单是开发中经常碰到的，随处可见，掌握菜单多级菜单对以后编程具有很重要的意义，这里我只是做了一个简单的二级菜单，从简单的入手，找出规律后，难的就会变得简单了

示例代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            body{
                width: 600px;
                margin: auto;    
            }
            .img{
                width:510px;
                height: 450px;
                margin-left: 40px;
                background: url(img/bg.jpg);
            }
            .first li{                
                text-align: center;
                list-style: none;
                width:125px;
                height: 30px;
                background-color: black;
                border-radius: 5px;
                margin-right: 3px;
                color: white;
                line-height: 30px;
            }
            .first>li{
                float: left;
            }
            .first>li:hover{
                background-color: gray;                
            }
            .first li ul li{
                margin-bottom: 1px;
                opacity: .5;
            }
            .first li ul{
                margin-left: -40px;
                display: none;
                position: absolute;
            }
            .first li ul li:hover{
                background-color: gray;
                color: black;
            }
            .first>li:hover ul{
                display: block;
            }
        </style>
    </head>
    <body>
        <ul class="first">
            <li>
                <a>在线留言</a>
            </li>
            <li>
                <a>产品展示</a>
                <ul>
                    <li>成品大鲵</li>
                    <li>新品鲵苗</li>
                    <li>鲜活幼鲵</li>
                </ul>
            </li>
            <li>
                <a>养殖技术</a>
                <ul>
                    <li>烹饪方法</li>
                    <li>防虫技术</li>
                    <li>接种鲵苗</li>
                </ul>
            </li>
            <li>
                <a>公司摄影</a>
                <ul>
                    <li>日常摄影</li>
                    <li>活动摄影</li>
                </ul>
            </li>
            </ul>
        <div class="img"></div>
    </body>
</html>

运行结果：

 

posted @ 2016-11-28 15:42  折翅女孩  阅读(164)  评论(0)  编辑  收藏  举报