sscms Header 排版CSS+HTML

<header class="header" data-aos="fade-down">
    <div class="wrap">
        <div class="logo">
            <stl:a channelIndex="首页">
                <img src="{Stl.SiteUrl}/upload/logo.png" alt="{stl.siteName}">
            </stl:a>
        </div>
        <div class="nav_btn"></div>
        <ul id="nav">
            <stl:if testType="ChannelName" testOperate="Equals" value="首页">
                <stl:yes>
                    <li class="nav_li active"><a href="{Stl.SiteUrl}/" class="active">网站首页</a></li>
                </stl:yes>
                <stl:no>
                    <li class="nav_li"><a href="{Stl.SiteUrl}/">网站首页</a></li>
                </stl:no>
            </stl:if>
            <stl:channels topLevel="0" groupChannel="nav">
                <stl:if type="UpChannelOrSelf">
                    <stl:yes>
                        <li class="nav_li active">
                            <stl:a class="active">{Channel.Title}</stl:a>
                            <stl:if type="CountOfChannels" operate="GreatThan" value="0">
                                <stl:yes>
                                    <ul class="menu">
                                        <stl:channels>
                                        <li><stl:a>{Channel.Title}</stl:a></li>
                                        </stl:channels>
                                    </ul>
                                </stl:yes>
                            </stl:if>
                        </li>
                    </stl:yes>
                    <stl:no>
                        <li class="nav_li">
                            <stl:a>{Channel.Title}</stl:a>
                            <stl:if type="CountOfChannels" operate="GreatThan" value="0">
                            <stl:yes>
                                <ul class="menu">
                                    <stl:channels>
                                    <li><stl:a>{Channel.Title}</stl:a></li>
                                    </stl:channels>
                                </ul>
                            </stl:yes>
                        </stl:if>
                        </li>
                    </stl:no>
                </stl:if>
            </stl:channels>
        </ul>
    </div>
</header>

.header {
    width: 100%;
    background-color: #fff;
}
.header .logo{
    padding-top:20px;
    padding-bottom:20px;
}
.header #nav{
    width:55%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}
#nav li.nav_li{
    width:calc(100% / 6 - 0px);
    text-align: center;
    position: relative;
}
#nav li::after{
    position:absolute;
    bottom:0px;
    content:'';
    width:80px;
    left:50%;
    margin-left:-40px;
    height:0px;
    background:#00a5ff;
    transition:all 0.8s;
}
#nav li:hover:after{height:100%}
#nav li.nav_li:first-child{border-left:0px;}
#nav li a{color:#666;  line-height: 6;}
#nav li>a{color:#666;  line-height: 6;display: block;
}
#nav li.active a{color:#666; 
    line-height: 6;}
#nav li:hover a{
    color: #fff;
    line-height: 6;
    z-index: 2;
    position:relative;
}
#nav li.active:hover a{color: #00aaff; line-height: 6;}
#nav li.active:after{
    position:absolute;
    bottom:0px;
    content:'';
    width:80px;
    left:50%;
    margin-left:-40px;
    height:2px;
    background:#00a5ff;
    transition:all 0.8s;
}
#nav li.nav_li:hover ul.menu{
    display: block;
    opacity: 1;
}
#nav li.nav_li ul.menu{
    opacity: 0;
    position:absolute;
    width:100%;
    top: 31px;
    background-color: #b22215;
}
#nav ul.menu li{
    position:relative;
    height: 42px;
    line-height: 42px;
}
#nav ul.menu li:after{bottom:0;}