css实现导航二级菜单

Ylk_IT

于 2021-07-10 15:13:46 发布

阅读量314

点赞数

本文链接：https://blog.csdn.net/ylk_manong/article/details/118635579

版权

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

摘要由CSDN通过智能技术生成

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: