CSS | 导航栏下拉菜单淡入淡出

HTML文档：

<div class="drop_bar">
        <ul class="drop_bar">
            <li><a href="#home" class="active" target="_blank">主页</a></li>
            <div class="drop_down">
                <a id="drop_menu" href="#introduce" target="_blank">部门介绍</a>
                <div class="drop_content">
                    <a href="#media" target="_blank">新媒体运营部</a>
                    <a href="#maker_service" target="_blank">创客服务部</a>
                    <a href="#vip_service" target="_blank">会员服务部</a>
                    <a href="#office" target="_blank">综合办公室</a>
                </div>
            </div>
            <li><a href="#contect" target="_blank">联系我们</a></li>
        </ul>
    </div>

CSS：

ul.drop_bar {
    position: relative;
    width: 93%;
    height: 50px;
    background-color: #333;
    list-style-type: none;
    /*实现居中*/
    margin: auto;
    padding: 0;
}

ul.drop_bar li {
    width: 33.33%;
    float: left;
    margin: 0;
}

ul.drop_bar li a {
    /*让整个区域成为可点击的*/
    display: block;
    color: white;
    padding: 14px 10px;
    text-decoration: none;
    text-align: center;
    outline: none;
    transition-duration: 0.4s;
}

ul.drop_bar li a.active {
    background-color: #111;
}

ul.drop_bar li a:hover:not(.active) {
    background-color: #111;
}

div.drop_down {
    width: 33.33%;
    float: left;
    overflow: hidden;
    transition-duration: 0.4s;
}

div.drop_down:hover a#drop_menu {
    background-color: #111;
}

div.drop_down:hover div.drop_content {
    opacity: 1;
}

div.drop_down a {
    display: block;
    text-align: center;
    text-decoration: none;
    color: white;
    background-color: #333;
    padding: 14px 10px;
    outline: none;
    transition-duration: 0.4s;
}

div.drop_content {
    display: block;
    position: relative;
    z-index: 2;    /*解决堆叠问题*/
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.5);
    clear: both;
    opacity: 0;
    transition-duration: 0.7s;
}

div.drop_content a:hover {
    background-color: #111;
}

div.drop_bar::after {
    clear: both;
}

来源：https://blog.csdn.net/SuzukiT/article/details/99292247

标签

淡入淡出

css