﻿.curMenu{
    color: white;font-weight: bold;
}

/*
注1：配合 TanULMenu.js 使用
注2：使用 UL、LI 制作下拉菜单：TanMenu、TanMenuLevel1 要与页面文件中的名称一致
注3：使用示例如下：

<div style="z-index: 1;">
    <ul id="TanMenu">
        <li  class="TanMenuLevel1">
            <a href="#" >学院首页</a>
        </li>
        <li  class="TanMenuLevel1">
            <a href="#" class="curA" >学院概况</a>
            <!--显示竖线用：外层div撑大占位，内层div使用背景色显示竖线-->
            <div><div></div></div>
            <!--下拉菜单，子菜单横向显示时，需要设置 margin-left -->
            <ul style="margin-left: -390px;">
                <li>
                    <a href="#" >学院简介</a>
                </li>
                <li>
                    <a href="#" >领导班子</a>
                </li>
            </ul>
        </li>
        <li  class="TanMenuLevel1">
            <a href="#" >师资队伍</a>
        </li>
    </ul>
</div>

*/

/*---*****主菜单使用*****---*/
#TanMenu {
    display: block;
    padding: 0px;
    margin: 0px;
    /*font-family: "宋体";*/
    font-size: 20px;
    /*font-weight: bold;*/
    
    display: flex;
/*    background-color: red;*/
}
/*所有 ul li 共用*/
#TanMenu ul, li {
    /*不显示前缀圆点*/
    list-style-type: none;
    padding: 0;
    margin: 0;
    text-transform: capitalize;
}
/*所有 a 共用*/
#TanMenu a {
    text-decoration: none;
    display: block;
    /*所有 a 的左右对齐方式*/
    text-align: center;
}
/* 主菜单独有设置：页面不同，需要修改的项：background、width */
#TanMenu .TanMenuLevel1 {
    /*主菜单横向整体左右对齐方式
    float: right;*/
    /*background: #fff;
    border-left: 0px solid #fff;*/
    min-width: 158px;
	/* 高度：相对底栏，上下居中 */
    height: 42px; 
    line-height: 42px;
    margin-top: 15px;
    /*margin-left: 0px;*/
}
/*主菜单：默认样式*/
#TanMenu .TanMenuLevel1 a {
    color: #DAD9D8;
    /*text-align: right;*/
}
/*主菜单：选中的当前菜单样式*/
#TanMenu .TanMenuLevel1 a.curA{
    color: white;
    font-weight: bold;
}
/*主菜单：鼠标指向样式*/
#TanMenu .TanMenuLevel1 a:hover {
    /*background: #ca1d3e;*/
    color: white;
    font-weight: bold;
    /*font-size: larger;*/
}
/*---*****下拉菜单使用*****---*/
#TanMenu .TanMenuLevel1 ul {
    display: none;
    position: absolute;
    height: 60px;
    line-height: 60px;
    
/******
    横向子菜单居中：左移，计算方法
    子菜单数 size2
    主菜单数 size1
    主菜单当前位置 pos1, 从 1 开始
    主、子菜单宽度 width
    主菜单右边个数 r1 = size1 － pos1
    子菜单右边个数 r2 = size2 / 2  - 0.5 
    主菜单左边个数 r3 = pos1 - 1
    （1）r1 >= r2，取 x = r2
    （2）r1 < r2，取  x = r2 + r2 - r1
    （3）x > r3，取 x = r3
    则， margin-left: -x*width；
    注：每个主菜单中的 ul margin-left 不同，示例如下
    <ul style="margin-left: -390px;">
******/
}
/*子菜单的引导横线：如无div，则不生效*/
#TanMenu .TanMenuLevel1 div {
	display: none;
    /*宽度 + 左右 = 主菜单宽度*/
	width: 80px; 
    margin: 0 35px;
    /*高度+边线 = 主菜单底部空白高度*/
	height: 14px;
    border-top: 1px solid white;
}
/*子菜单的引导竖线：如无div，则不生效*/
#TanMenu .TanMenuLevel1 div div {
    /*宽度 + 左右 = 外层div宽度*/
	width: 2px; 
    margin: 0 39px;
    /*高度与外层div相同*/
	height: 100%;
    background-color: white;
}
/* 子菜单项样式 */
#TanMenu .TanMenuLevel1 li {
    border-top: 1px solid white;
    filter:alpha(opacity=80);
    opacity: 0.8;
    width: 150px;
    /*子菜单横向*/
	float: left;
    /*子菜单 A 
    background: #33271E;*/
    /*子菜单 B */
    background: white;
}
/* 子菜单项中 a 样式 */
#TanMenu .TanMenuLevel1 li a {
    /*text-align: right;*/
    /*padding-left: 10px;*/
    text-align: center;
    width: 150px;
    /*子菜单 A 
    color: #DAD9D8;*/
    /*子菜单 B */
    color: #010101;
}
/* 子菜单项中 a 鼠标指向样式 */
#TanMenu .TanMenuLevel1 li a:hover {
    /*background: #0033FF;*/
    /*background: #33271E;*/
    font-weight: bold;
    /*子菜单 A 
    color: white;*/
    /*子菜单 B */
    color: #33271E;
}