顶部页眉菜单缩放条-B2主题美化

示例请查看本站。

css样式：

.header-banner-left .menu li.current-menu-item a:after{
    background-color: #599bff; 
 }
.social-top .header-banner-left .menu li a:after{
    content: "";
    display: block;
    position: absolute;
    left: 50%;
    -webkit-transform: translateX(-50%) scaleX(0);
    -ms-transform: translateX(-50%) scaleX(0);
    transform: translateX(-50%) scaleX(0);
    bottom: 6px;
    width: 0;
    height: 2px;
    background-color: #599bff;
    -webkit-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}
.social-top .header-banner-left .menu li a:hover:after{
    width: 100%;
    -webkit-transform: translateX(-50%) scaleX(1);
    -ms-transform: translateX(-50%) scaleX(1);
    -moz-transform: translateX(-50%) scaleX(1);
    transform: translateX(-50%) scaleX(1);
}
.header-banner-left .menu li.current-menu-item a {
    color: #599bff;
    font-weight: 600;
}

调用方法：

后台设置-外观-自定义-额外CSS-添加在最后即可