【css技术指南笔记】第六章 导航菜单
博客专区 > 郑二 的博客 > 博客详情
【css技术指南笔记】第六章 导航菜单
郑二 发表于3年前
【css技术指南笔记】第六章 导航菜单
  • 发表于 3年前
  • 阅读 5
  • 收藏 0
  • 点赞 0
  • 评论 0
<!DOCCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8">
        <script src="js/jquery.js"></script>
        <style type="text/css">
            .multi-drop-menu{
                float: left;
            }
            .multi-drop-menu *{
                margin: 0;
                padding: 0;
            }
            .multi-drop-menu li{
                list-style-type: none;
                position: relative;
            }
            .multi-drop-menu a{
                display: block;
                background: #eee;
                padding: 3px;
                border: 1px solid #ffe;
                color: #aaa;
                text-decoration: none;
            }
           /* .multi-drop-menu a:hover{
                background: #fff;
            }*/
            .multi-drop-menu li{
                float: left;
            }

            .multi-drop-menu li ul{
                display: none;
                position: absolute;
                /*display: block;*/
                left: 0;
                top: 100%;
            }
            .multi-drop-menu li ul li{
                float: none;
            }
            .multi-drop-menu li:hover>ul{
                display: block;
            }

            .multi-drop-menu li li ul{
                left: 100%;
                top: 0;
            }
            .multi-drop-menu li:hover > a{
                background: #fff;
            }
        </style>
    </head>
    <body>
       <nav>
           <ul class="multi-drop-menu">
               <li><a href="#">LL1</a></li>
               <li><a href="#">LL2</a></li>
               <li>
                    <a href="#">LL3</a>
                    <ul>
                        <li><a href="#">LL3LL1</a></li>
                        <li>
                            <a href="#">LL3LL2</a>
                            <ul>
                                <li><a href="#">1111</a></li>
                                <li><a href="#">3333</a></li>
                            </ul>
                        </li>
                        <li><a href="#">LL3LL3</a></li>
                    </ul>
               </li>
               <li><a href="#">LL4</a></li>
           </ul>
       </nav>
    </body>
</html>

记录实现的下拉导航




共有 人打赏支持
粉丝 0
博文 18
码字总数 4318
×
郑二
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: