因为IE6所以不得不加入JS
效果如下:
在IE8和Firefox无需Javascript代码既可以实现:
<div id="container">
<div id="logo"><a href="http://www.ops.cc"></a></div>
<div id="nav">
<div class="left"></div>
<div class="item">
<ul>
<li><a href="http://www.ops.cc/" class="p current">网站首页</a></li><li class="split" />
<li><a href="http://www.ops.cc/info/" class="p">行业资讯
<em><a href="http://www.ops.cc/info_tradenews/" title="最新资讯-行业动态">行业动态</a>
<a href="http://www.ops.cc/info_webtech/" title="最新资讯-建站知识">建站知识</a>
<a href="http://www.ops.cc/info_webdesign/" title="最新资讯-网站设计">网站设计</a>
<a href="http://www.ops.cc/info_program/" title="最新资讯-编程开发">编程开发(Jsp,Asp.net,Asp,Javascript)</a>
</em></a></li><li class="split" />
<li><a class="p" href="http://www.ops.cc/web/" title="网站建设">网站建设<em><a href="#">SITE-A:基础型建站服务</a><a href="#">SITE-B:商务智能型建站服务</a><a href="#">SITE-C:个性化自定义开发型</a></em></a></li><li class="split">
<li><a class="p" href="http://www.ops.cc/hosting/" title="虚拟主机">虚拟主机<em><a href="http://www.ops.cc/hosting/vps.html">独立服务器主机(中国)</a><a href="http://www.ops.cc/hosting/vps-us.html">独立服务器主机(En-US)</a><a href="http://www.ops.cc/hosting/webspace.html">共享主机空间</a><a href="http://www.ops.cc/hosting/dip.html">海外独立IP主机</a><a href="http://www.ops.cc/hosting/freehosting.html">免费主机</a></em></a></li><li class="split">
<li><a class="p" href="http://www.ops.cc/solution/" title="解决方案">解决方案</a></li><li class="split">
<li><a class="p" href="http://www.ops.cc/seo/" title="营销推广">营销推广</a></li><li class="split">
<li><a class="p" href="http://www.ops.cc/case/" title="成功案例">成功案例</a></li><li class="split">
<li><a href="http://www.ops.cc/" class="p">关于我们<em><a href="http://www.ops.cc/html/aboutus.html">关于我们</a><a href="http://www.ops.cc/html/job.html">人才招聘</a><a href="http://www.ops.cc/html/contactus.html">联系我们</a><a href="http://www.ops.cc/html/pay.html">付款方式 </a></em></a></li><li class="split" />
<li><a href="http://www.ops.cc/html/service.html" class="p">客服中心</a></li>
</ul>
</div>
<div class="right"></div>
</div>
<script type="text/javascript">
var _ntor = navigator.userAgent;
var otherNav = _ntor.indexOf("IE 7.0") != -1 || _ntor.indexOf("IE 6.0") != -1;
if (otherNav) {
$("a.p").mouseover(function () {
$("#nav li div").each(function () { this.parentNode.removeChild(this); });
var _html = this.getElementsByTagName('em')[0].innerHTML;
var _div = document.createElement("div");
_div.className = 'emp';
_div.innerHTML = _html;
/* _div.onmouseout = function () { this.parentNode.removeChild(_div); }*/
this.parentNode.appendChild(_div);
});
}
</script>
</html>
CSS
/* 导航 */
#nav{background:url(http://sh.ops.cc/style/images/img.gif) 0 -73px;height:41px;}
#nav div.left{float:left;2px;margin-right:2px;height:41px;background:red url(http://sh.ops.cc/style/images/img.gif) 0 -31px;}
#nav div.item{float:left;auto;margin:0 2px 0 2px;}
#nav div.right{float:right;2px;margin-left:-2px;height:41px;background:red url(http://sh.ops.cc/style/images/img.gif) -10px -31px;}
#nav div.item ul{list-style:none;margin:0;padding:0 10px;}#nav div.item li{float:left;position:relative;}
#nav div.item li.split{background:url(http://sh.ops.cc/style/images/img.gif) -12px -31px no-repeat;2px;height:41px;}
#nav a.p:link,#nav a.p:visited{padding:0 18px;line-height:41px;display:block;float:left;color:white;text-decoration:none;font-weight:bold;font-size:14px;}
#nav a.p:hover,#nav a.current{background:url(http://sh.ops.cc/style/images/img.gif) 0 -115px no-repeat;zoom:1;}
#nav li em{display:none;font-style:normal;position:absolute;top:41px;background:#75B4D4;250px;overflow:hidden;}
#nav li:hover em{display:inherit;}
#nav a.p:hover em{display:inherit;}
#nav em a:link,#nav em a:visited{line-height:30px;font-size:12px;display:block;padding:0 8px;text-decoration:none;color:White;border-bottom:dotted 1px White;}
#nav em a:hover{font-weight:bold;background:orange;}
/* IE6,7下用div显示 */
#nav div.emp{position:absolute;top:41px;left:0;background:#75B4D4;250px;}
#nav div.emp a:link,#nav div.emp a:visited{line-height:30px;font-size:12px;display:block;padding:0 8px;text-decoration:none;color:White;border-bottom:dotted 1px White;}
#nav div.emp a:hover{font-weight:bold;background:orange;}