纯CSS样式二级菜单导航

原创 新起点博客  2020-06-18 10:53 
【上云必备】上云仅?102/年

CSS样式二级菜单导航,颜色样式大家自己更改,新起点就不在这里解释那么多了,代码如下:

 

HTML:

<div class="nav">
    <ul>
        <li class="mom"><a href="">网站首页</a></li>
        <li><a href="">关于我们</a></li>
        <li class="show_nav"><a href="">案例中心</a>
            <ul class="hide_nav">
                <li><a href="">网页设计</a></li>
                <li><a href="">App开发</a></li>
                <li><a href="">网站建设</a></li>
                <li><a href="">微信小程序</a></li>
            </ul>
        </li>
        <li><a href="">新闻中心</a></li>
        <li><a href="">联系我们</a></li>
    </ul>
</div>

CSS:

.nav{
    width:100%;
    height: 50px;
    text-align: center;
    background:orange;
}
.nav ul{
    margin: 0px auto;
}
.nav ul li{
    width:100px;
    line-height: 50px;
    float: left;
}
.nav ul li a{
    width: 100px;
    color:#fff;
    display: block;
}
.nav ul li a:hover{
    background: #ffb908;
}
.mom a:nth-child(1){
    background: #FFFFFF;
    color: orange;
}

.show_nav:hover .hide_nav{
    display: block;
}
.nav .hide_nav {
    display: none;
    transition:all 0.5s;
    position: relative;
}
.nav .hide_nav a{
    width:100px;
    height: 50px;
    background: #000;
}
.nav .show_nav .hide_nav .three_nav{
    width: 100px;
    height: 50px;
    line-height: 50px;
    position: absolute;
    left: 100px;
    top:0;
    background-color: #FFB908;
    display: none;
}

.nav .hide_nav:hover .three_nav{
    display: block;
}

 

本文地址:https://www.henenseo.com/archives/2555
关注我们:请关注一下我们的微信公众号:扫描二维码新起点博客的公众号,公众号:xinqidian129
版权声明:本文为原创文章,版权归 新起点博客 所有,欢迎分享本文,转载请保留出处!
宝塔服务器面板,一键全能部署及管理,送你3188元礼包,点我领取
【腾讯云】海外1核2G服务器低至2折,半价续费券限量免费领取!

发表评论


表情