css实现导航二级菜单

最新推荐文章于 2023-07-18 01:12:41 发布

Ylk_IT

最新推荐文章于 2023-07-18 01:12:41 发布

阅读量360

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/Ylk_manong/article/details/118635579

这篇博客介绍了如何使用CSS来实现一个功能完善的导航二级菜单，对于初学者来说非常有帮助。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

css实现导航二级菜单

*{margin:0; padding:0;}
li{list-style: none;}
a{text-decoration: none; color: #333;}
button{border:none;}
input{outline:none;}
textarea{resize:none;}
em,i{font-style: normal;}

.orange{
    color: #fa0;
}
.clearfix::after{
    content:"";
    clear:both;
    display: block;
}
.navbar_wrap{
    min-width: 1190px;
    background: #f5f5f5;
    border-bottom: 1px solid #ddd;
    height: 35px;
}
.navbar{
    width: 1190px;
    height: 35px;
    line-height: 35px;
    margin: 0 auto;
}
.navbar_left{
    float: left;
}
.navbar_right{
    float: right;
}
.navbar .bar_box{
    float: left;
    height: 35px;
    line-height: 35px;
}
.navbar .iconfont{
    font-size: 12px;
}
.navbar .bar_box span,.navbar .bar_box>a{
    display: inline-block;
    font-size: 12px;
    padding: 0 10px;
}
.navbar .menu span{
    /* background: #fff; */
    position: relative;
    line-height: 36px;
    z-index: 2;
}
.navbar .menu:hover span{
    background: #fff;
}
.navbar .menu{
    border-left: 1px solid transparent;
    border-right: 1px solid transparent;
    position: relative;
}
.navbar .menu:hover{
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
}
.dn_con_web{
    width: 988px;
    left: -1px;
}
.dn_con{
    border: 1px solid #ddd;
    position: absolute;
    top: 35px;
    display: none;
}
.navbar .menu:hover .dn_con{
    display: block;
}
.dn_con_shop{
    width: 180px;
    right: -1px;
}
.dn_con_servise{
    width: 100%;
    left: -1px;
}
.dn_con_servise1{
    width: 100%;
    left: -1px;
}

<div class="navbar_wrap">
        <div class="navbar clearfix">
            <div class="navbar_left">
                <div class="bar_box menu">
                    <span>网站导航 <i class="iconfont icon-xiala"></i></span>
                    <div class="dn_con dn_con_web">
                        <dl>
                            <dt>特色购物</dt>
                            <dd>
                                <p>苏宁卡</p>
                                <p> <a class="hot" href="#">苏宁达人</a> </p>
                                <p>苏宁互联</p>
                                <p>苏宁卡</p>
                                <p>苏宁达人</p>
                                <p>苏宁互联</p>
                                <p>苏宁卡</p>
                            </dd>
                        </dl>
                    </div>
                </div>
                <div class="bar_box menu">
                    <span>网站购物 <i class="iconfont icon-xiala"></i></span>
                    <div class="dn_con dn_con_shop">
                        <dl>
                            <dt>特色购物</dt>
                            <dd>
                                <p>苏宁卡</p>
                                <p> <a class="hot" href="#">苏宁达人</a> </p>
                                <p>苏宁互联</p>
                                <p>苏宁卡</p>
                                <p>苏宁达人</p>
                                <p>苏宁互联</p>
                                <p>苏宁卡</p>
                            </dd>
                        </dl>
                    </div>
                </div>

            </div>
            <div class="navbar_right">
                <div class="bar_box menu">
                    <span>网站服务 <i class="iconfont icon-xiala"></i></span>
                    <div class="dn_con dn_con_servise">
                        <ul>
                            <li>24242</li>
                            <li>24242</li>
                            <li>24242</li>
                            <li>24242</li>
                            <li>24242</li>
                        </ul>
                    </div>
                </div>
                <div class="bar_box menu">
                    <span>网站导航 <i class="iconfont icon-xiala"></i></span>
                    <div class="dn_con dn_con_servise1">
                        <p>fsdfsdfafsaef</p>
                        <p>fsdfsdfafsaef</p>
                        <p>fsdfsdfafsaef</p>
                        <p>fsdfsdfafsaef</p>
                    </div>
                </div>
                <div class="bar_box">
                    <a href="#">网站导航</a>
                </div>
            </div>
        </div>
    </div>

希望可以帮到小白