變換菜單展現及製做

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>