/*
注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 {
    /*导航栏上下居中顶部位置*/
    top: 16px;
    
    height: 60px;
    width: 100%;
    position: relative;
    /*float: left;*/
    z-index: 1;
}
/*所有 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%;

    /*菜单项：字体、颜色*/
    color: black;
    font-size: 20px;
    font-family: "微软雅黑", "黑体";    
}
/*主菜单栏*/
.TanMenu01 .TanMenuBar01 {
    display: table;
    width: 100%;
    height: 100%;/*    padding: 0px;*/
    /*margin: auto;*/
    /*font-family: "宋体";*/
    /*font-weight: bold;
    font-size: 22px;*/
}
/* 页面不同，需要修改项 background */
.TanMenu01 .TanMenuBar01 .TanMenuLevel01 {
    height: 100%;
    /*平均分配宽度*/
    display: table-cell;/*    text-align: center;*/
    /*主菜单项：横向
    float: left;
    margin: 0px 8px;*/
    /*background: #fff;
    border-left: 1px solid #fff;*/
}
.TanMenu01 .TanMenuBar01 .TanMenuLevel01:first-child {
/*table-cell 时无效
    margin-left: 10px;
    margin-right: 15px;*/
/*    text-align: left;*/
    /*padding-left: 20px;
    width: 80px;*/
/*    float: left;*/
}
.TanMenu01 .TanMenuBar01 .TanMenuLevel01:last-child {
/*    float: right;*/
    /*table-cell 时无效
    margin-left: 15px;
    margin-right: 0px;*/
/*    text-align: right;*/
/*    padding-right: 20px;
    width: 80px;*/
}
/*主菜单项：超链接设置*/
.TanMenu01 .TanMenuBar01 .TanMenuLevel01>a {
    float: right;
}
/*第1个li中的a左浮动，其余右浮动*/
.TanMenu01 .TanMenuBar01 .TanMenuLevel01:first-child>a {
    float: left;
}
/*主菜单项：当前项超链接设置*/
.TanMenu01 .TanMenuBar01 .TanMenuLevel01>a.curA {
    /*color: red;*/

/*
    border-bottom: 2px solid #15B0B8;
    padding-bottom: 0px;
*/

    text-shadow: 0px 6px 6px #252525;/*font-weight: bold;*/
}
/*主菜单项：鼠标指向样式*/
.TanMenu01 .TanMenuBar01 .TanMenuLevel01>a:hover {
/*
    border-bottom: 2px solid #333;
    padding-bottom: 0px;
*/
}
.TanMenu01 .TanMenuBar01 .TanMenuLevel01>a:before {
    position: absolute;
    bottom: 25px;
    left: 50%;
    width: 0;
    height: 2px;
    background: #333;
    content: "";
    transition: width 0.7s
}
.TanMenu01 .TanMenuBar01 .TanMenuLevel01>a:after {
    position: absolute;
    right: 50%;
    bottom: 25px;
    width: 0;
    height: 2px;
    background: #333;
    content: "";
    transition: width 0.7s
}
.TanMenu01 .TanMenuBar01 .TanMenuLevel01>a:hover::before {
    width: 50%
}
.TanMenu01 .TanMenuBar01 .TanMenuLevel01>a:hover::after {
    width: 50%
}
/*---*****下拉菜单使用*****---*/
/*子菜单的引导横线：如无div，则不生效*/
/*
.TanMenu01 .TanMenuLevel01 div {
	display: none;
	height: 30px;
*/
    /*border-top: 0px solid red;
    border-bottom: 2px solid #d5e3f0;*/
    /*background-color: blue;*/
/*}*/
/*子菜单的引导竖线：如无div，则不生效*/
/*
.TanMenu01 .TanMenuLevel01 div div {
    display: none;
*/
    /*竖线宽度*/
/*
	width: 0px; 
    margin: 4px auto;
*/
    /*高度与外层div相同*/
/*
	height: 100%;
    background-color: red;
}
*/

/*下拉菜单栏*/
.TanMenu01 .TanMenuBar02 {
    display: none;
    position: absolute;
    top: 55px;
    /*菜单栏，左右留 50，上留35，下由 li 指定*/
    padding: 35px 100px 0px;
    background-color: white;

    box-shadow: 0px 0px 3px 3px #D5F2F5;
}
/* 子菜单项样式 */
.TanMenu01 .TanMenuBar02 .TanMenuLevel02 {
    /*子菜单横向*/
    float: left;
    /*    text-align: left;*/
    
    /*border-top: 2px solid red;
    filter:alpha(opacity=80);
    opacity: 0.8;*/
    
    /*background: #33271E;*/

    width: auto;
    min-width: 110px;
    height: 30px;
    line-height: 30px;
    /*右50、下留35*/
    margin: 0px 50px 35px 0px;
}
/*第1个*/
.TanMenu01 .TanMenuBar02 .TanMenuLevel02:first-child {
    padding-left: 0px;/*margin-left: 0px;
    margin-right: 0px;*/
}
/*最后一个*/
.TanMenu01 .TanMenuBar02 .TanMenuLevel02:last-child {
    /*margin-left: 0px;*/
    margin-right: 0px;
    /*单行最后1个*/
    min-width: 0px;
    padding-right: 0px;
}
/*odd:奇数，even:偶数 ，li:nth-of-type(odd)*/
/*第xn+i个，x表示1行共几个，i表示1行中第几个（i从1开始，不加表示1行最后1个）*/
.TanMenu01 .TanMenuBar02 .TanMenuLevel02:nth-child(3n+1) {
    clear: both;/*    width: auto;*/
}
.TanMenu01 .TanMenuBar02 .TanMenuLevel02:nth-child(3n+2) {
/*    width: auto;*/
}
.TanMenu01 .TanMenuBar02 .TanMenuLevel02:nth-child(3n) {
    min-width: 0px;
    /*    width: auto;*/
    margin-right: 0px;
}
/* 子菜单项中 a 样式 */
.TanMenu01 .TanMenuBar02 .TanMenuLevel02>a {
    float: left;
    color: #252525;
    font-size: 18px;
    /*    border-bottom: 2px solid red;*/
}
/* 子菜单项中 a 鼠标指向样式 */
.TanMenu01 .TanMenuBar02 .TanMenuLevel02>a:hover {
/*
    color: #474747;
    border-bottom: 2px solid #474747;
    padding-bottom: 3px;
*/
}
.TanMenu01 .TanMenuBar02 .TanMenuLevel02>a:before {
    position: absolute;
    bottom: 0px;
    left: 50%;
    width: 0;
    height: 2px;
    background: #333;
    content: "";
    transition: width 0.7s
}
.TanMenu01 .TanMenuBar02 .TanMenuLevel02>a:after {
    position: absolute;
    right: 50%;
    bottom: 0px;
    width: 0;
    height: 2px;
    background: #333;
    content: "";
    transition: width 0.7s
}
.TanMenu01 .TanMenuBar02 .TanMenuLevel02>a:hover::before {
    width: 50%
}
.TanMenu01 .TanMenuBar02 .TanMenuLevel02>a:hover::after {
    width: 50%
}