变换菜单展示及制作

2019独角兽企业重金招聘Python工程师标准>>>

css样式：
.top-nav
{
font-size: 12px;
font-weight: bold;
list-style: none;
border-bottom: 8px solid #DC4E1B;
overflow: auto;
//去浮动，使下级的浮动自适应或 overflow:hidden;
}
.top-nav li
{
float: left;
margin-right: 1px;
}
.top-nav li a
{
line-height: 20px;
text-decoration: none;
background: #DDDDDD;
color: #666666;
display: block;
width: 80px;
text-align: center;
}
/*设置正常状态英文菜单隐藏*/
.top-nav li a span{
display:none;
}
/*鼠标移动到链接上面时将英文菜单显示*/
.top-nav li a:hover span{
display:block;
}
/*鼠标移动到链接上面时将中文菜单位置上移*/
.top-nav li a:hover{
margin-top:-20px;
}
例如：

<div id="indexLeftB" class="clearfix">
                <div id="indexLeftBL">
                    <ul class="leftItem">
<li><a href="https://xxx.cn/otn" target="_blank"><img src="./images/newS.gif" alt width="194" height="37" border="0" /></a></li><li><a class="k1" href="https://xxx.cn/otn/regist/init" target="_blank">网上购票用户注册</a></li><li><a class="k2" href="https://xxx.cn/otn/" target="_blank">购票</a></li><li><a class="k11" href="https://xxx.cn/otn/insurance/init" target="_blank">我的保险</a></li><li><a class="k3" href="http://www.bdqcp.net/" target="_blank">保定长途汽车站</a></li><li><a class="k4" href="https://xxx.cn/otn/lcxxcx/init" target="_blank">余票查询</a></li><li><a class="k5" href="https://xxx.cn/otn/leftTicket/init" target="_blank">旅客列车时刻表查询</a></li><li><a class="k6" href="./kyfw/lczwdcx/">旅客列车正晚点查询</a></li><li><a class="k7" href="https://xxx.cn/otn/leftTicketPrice/init" target="_blank">票价查询</a></li><li><a class="k8" href="https://xxx.cn/otn/queryAgencySellTicket/init" target="_blank">客票代售点查询</a></li><li><a class="k9" href="./kyyyz/">客运营业站站点 </a></li><li><a class="k10" href="./tlkytst/"><img src="./images/ico_tltel.gif" alt="铁路客服中心电话" width="192" height="44" /></a></li>
</ul>
                </div>

转载于:https://my.oschina.net/u/3042303/blog/806471