<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>导航条</title> <mce:style type="text/css"><!-- body{margin:0;padding:0;} #list{width:200px;} #list ul,li{margin:0;padding:0; list-style-type:none;} #list li{background:#f7f7f7;height:24px;line-height:24px;width:200px;border-bottom:1px solid #ccc;text-align:center;position:relative;} #list li.hover{background:#c0c0c0 url(http://img.ifeng.com/tres/phoenix/icon2.gif) no-repeat 186px -303px;} #list li a{height:24px;line-height:24px;} #list li ul{display:none;position:absolute;top:0;left:0;margin-left:200px;} #list li ul li{background:#ffffe1;width:200px;} #list li ul li.hover{background:#ffffe1;} --></mce:style><style type="text/css" mce_bogus="1">body{margin:0;padding:0;} #list{width:200px;} #list ul,li{margin:0;padding:0; list-style-type:none;} #list li{background:#f7f7f7;height:24px;line-height:24px;width:200px;border-bottom:1px solid #ccc;text-align:center;position:relative;} #list li.hover{background:#c0c0c0 url(http://img.ifeng.com/tres/phoenix/icon2.gif) no-repeat 186px -303px;} #list li a{height:24px;line-height:24px;} #list li ul{display:none;position:absolute;top:0;left:0;margin-left:200px;} #list li ul li{background:#ffffe1;width:200px;} #list li ul li.hover{background:#ffffe1;} </style> <mce:script src="Js/jquery-1.4.2.min.js" mce_src="Js/jquery-1.4.2.min.js" type="text/javascript"></mce:script> <mce:script type="text/javascript"><!-- $(function () { $('#list li').hover(function () { $(this).addClass('hover').find('ul').show(); }, function () { $(this).removeClass('hover').find('ul').hide(); }); }) // --></mce:script> </head> <body> <div id="list"> <ul> <li> <a>航空障碍灯</a> <ul> <li> 高光强航空障碍灯 </li> <li> 中光强航空障碍灯 </li> <li> 低光强航空障碍灯 </li> </ul> </li> <li> <a>避雷塔</a> <ul> <li> 特殊用途塔 </li> <li> 通讯他/通信塔 </li> <li> 装饰塔 </li> <li> 拉线塔 </li> <li> 拉线塔 </li> <li> 照明灯塔 </li> </ul> </li> </ul> </div> </body> </html>