﻿/*
注1：配合 TanULMenu.js 使用
注2：使用 UL、LI 制作下拉菜单：TanMenu01、TanMenuBar01、TanMenuLevel01、TanMenuBar02、TanMenuLevel02 要与页面文件中的名称一致
注3：使用示例如下：

<!--菜单 1-->
<div class="TanMenu01">
    <ul class="TanMenuBar01">
        <li class="TanMenuLevel01">
            <a href="#" >首页</a>
        </li>
        <li class="TanMenuLevel01">
            <a href="#" class="curA">师资队伍
            <!--显示竖线用：外层div撑大占位，内层div使用背景色显示竖线-->
            <div><div></div></div>
            </a>
            <!--下拉菜单，子菜单横向显示时，需要计算每个的宽度 -->
            <ul class="TanMenuBar02" style="width: 280px;">
                <li class="TanMenuLevel02">
                    <a href="#" >师资队伍123</a>
                </li>
                <li class="TanMenuLevel02">
                    <a href="#" >师资队伍abc</a>
                </li>
            </ul>                
        </li>
    </ul>
</div>

*/

/*---*****主菜单使用*****---*/
.TanMenu01 {
    height: 50px;
    line-height: 40px;
    position: absolute;
    top: 50px;
    right: 0px;
    z-index: 10;
}
/*所有 ul li 共用*/
.TanMenu01 ul, li {
    /*不显示前缀圆点*/
    list-style-type: none;
    padding: 0;
    margin: 0;
    text-transform: capitalize;
}
/*所有 a 共用*/
.TanMenu01 a {
    text-decoration: none;
    position: relative;
    display: block;
    height: 100%;
}
/*主菜单栏*/
.TanMenu01 .TanMenuBar01 {
    height: 100%;
    display: block;
    padding: 0px;
    margin: 0px;
}
/* 页面不同，需要修改项 background */
.TanMenu01 .TanMenuLevel01 {
    height: 100%;
    /*主菜单项：横向*/
    float: left;
    /*菜单间隔*/
    margin: 0px 10px;
}
/*首层菜单项左、右靠边*/
.TanMenu01 .TanMenuBar01 li:first-child {
    margin-left: 0px;
}
.TanMenu01 .TanMenuBar01 li:last-child {
    margin-right: 0px;
}
/*主菜单项：超链接设置*/
.TanMenu01 .TanMenuLevel01 a {
    /*font-family: "宋体";*/
    /*font-weight: bold;*/
    font-size: 22px;
    color: white;
}
/*主菜单项：当前项超链接设置*/
.TanMenu01 .TanMenuLevel01 a.curA {
    text-shadow: 0 4px 4px;
    /*    color: red;*/
    
/*
    border-bottom: 2px solid #15B0B8;
    padding-bottom: 3px;
*/

/*    font-weight: bold;*/
}
/*主菜单项：鼠标指向样式*/
.TanMenu01 .TanMenuLevel01 a:hover {
/*background: #ca1d3e;
    color: red;
    border-bottom: none;*/

/*
    border-bottom: 2px solid #d5e3f0;
    padding-bottom: 3px;
*/

    
    /*font-weight: bold;*/
    
    /*font-size: larger;*/
}
.TanMenu01 .TanMenuBar01 .TanMenuLevel01>a::before {
    position: absolute;
    bottom: 10px;
    width: 0;
    height: 2px;
    background: white;
    content: "";
    transition: width 0.5s;
    
    left: 50%;
}
.TanMenu01 .TanMenuBar01 .TanMenuLevel01>a::after {
    position: absolute;
    bottom: 10px;
    width: 0;
    height: 2px;
    background: white;
    content: "";
    transition: width 0.5s;

    right: 50%;
}
.TanMenu01 .TanMenuBar01 .TanMenuLevel01>a:hover::before {
    width: 50%
}
.TanMenu01 .TanMenuBar01 .TanMenuLevel01>a:hover::after {
    width: 50%
}

/*---*****下拉菜单使用*****---*/

/*下拉菜单栏*/
.TanMenu01 .TanMenuBar02 {
    display: none;
    position: absolute;
    /*菜单栏位置*/
    top: 50px;
}
/*2023-05-10：首页增加下拉菜单，下拉菜单居中对齐*/
.TanMenuBar01 li:first-child ul {
    margin-left: -22px;
}

/* 子菜单项样式 */
.TanMenu01 .TanMenuLevel02 {
    /*主菜单项宽度*/
    width: 88px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background-color: #C48862;
}
.TanMenu01 .TanMenuLevel02:hover {
    background-color: #E5904B;
}

/* 子菜单项中 a 样式 */
.TanMenu01 .TanMenuLevel02 a {
    font-size: 16px;
    color: #fefefe;
}
/* 子菜单项中 a 鼠标指向样式 */
.TanMenu01 .TanMenuLevel02 a:hover {
/*
    color: #474747;
    border-bottom: 2px solid #474747;
    padding-bottom: 3px;
*/
}

.p1BT01:before {
    position: absolute;
    left: 50%;
    bottom: -40px;
    width: 0%;
    height: 2px;
    background: #474747;
    content: "";
    transition: width 0.5s;
}
.p1BT01:after {
    position: absolute;
    right: 50%;
    bottom: -40px;
    width: 0%;
    height: 2px;
    background: #474747;
    content: "";
    transition: width 0.5s;
}
.p1BT01:hover::before {
    width: 50%
}
.p1BT01:hover::after {
    width: 50%
}

/*——————菜单栏其它元素——————*/
.mLog {
    margin-top: 45px;
}