<textarea rows=" 8 " id="CodeText 20594 " class="UBBText"><!DOCTYPE html PUBliC "-//W 3 C//DTD XHTML 1.0 Transitional//EN" |
"http://www.w 3 .org/TR/xhtml 1 /DTD/xhtml 1 -transitional.dtd"> |
<html xmlns="http://www.w 3 .org/ 1999 /xhtml" lang="zh-CN"> |
<head> |
<meta http-equiv="Content-Type" content="text/html; charset=gb 2312 " /> |
<script src="http://ajax.googleapis.com/ajax/libs/jquery/ 1.4 /jquery.min.js"></script> |
<title>css菜单演示</title> |
<style type="text/css"> |
<!-- |
*{ margin : 0 ; padding : 0 ; border : 0 ;} |
body { |
font-family : arial , 宋体, serif ; |
font-size : 12px ; |
} |
#nav { |
line-height : 24px ; list-style-type : none ; background : #666 ; |
} |
#nav a { |
display : block ; width : 80px ; text-align : center ; |
} |
#nav a:link { |
color : #666 ; text-decoration : none ; |
} |
#nav a:visited { |
color : #666 ; text-decoration : none ; |
} |
#nav a:hover { |
color : #FFF ; text-decoration : none ; font-weight : bold ; |
} |
#nav li { |
float : left ; width : 80px ; background : #CCC ; |
} |
#nav li a:hover{ |
} |
#nav li a.on{ background : #999 ;} |
#nav li ul { |
line-height : 27px ; list-style-type : none ; text-align : left ; |
left : -999em ; width : 180px ; position : absolute ; |
} |
#nav li ul li{ |
float : left ; width : 180px ; |
background : #F6F6F6 ; |
} |
#nav li ul a{ |
display : block ; width : 180px ;w\idth: 156px ; text-align : left ; padding-left : 24px ; |
} |
#nav li ul a:link { |
color : #666 ; text-decoration : none ; |
} |
#nav li ul a:visited { |
color : #666 ; text-decoration : none ; |
} |
#nav li ul a:hover { |
color : #F3F3F3 ; text-decoration : none ; font-weight : normal ; |
background : #C00 ; |
} |
#nav li:hover ul { |
left : auto ; |
} |
#nav li.sfhover ul { |
left : auto ; |
} |
#content { |
clear : left ; |
} |
--> |
</style> |
<script type=text/javascript><!--//--><![CDATA[//><!-- |
$(function(){ |
$("#nav li").hover(function(){ |
$(this).children("a").toggleClass("on"); |
}) |
}) |
function menuFix() { |
var sfEls = document.getElementById("nav").getElementsByTagName("li"); |
for (var i= 0 ; i<sfEls.length; i++) { |
sfEls[i].onmouseover=function() { |
this.className+=(this.className.length> 0 ? " ": "") + "sfhover"; |
} |
sfEls[i].onMouseDown=function() { |
this.className+=(this.className.length> 0 ? " ": "") + "sfhover"; |
} |
sfEls[i].onMouseUp=function() { |
this.className+=(this.className.length> 0 ? " ": "") + "sfhover"; |
} |
sfEls[i].onmouseout=function() { |
this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"), |
""); |
} |
} |
} |
window.onload=menuFix; |
//--><!]]></script> |
</head> |
<body> |
<ul id="nav"> |
<li><a href="#">产品介绍</a> |
<ul> |
<li><a href="#">产品一</a></li> |
<li><a href="#">产品一</a></li> |
<li><a href="#">产品一</a></li> |
<li><a href="#">产品一</a></li> |
<li><a href="#">产品一</a></li> |
<li><a href="#">产品一</a></li> |
</ul> |
</li> |
<li><a href="#">服务介绍</a> |
<ul> |
<li><a href="#">服务二</a></li> |
<li><a href="#">服务二</a></li> |
<li><a href="#">服务二</a></li> |
<li><a href="#">服务二服务二</a></li> |
<li><a href="#">服务二服务二服务二</a></li> |
<li><a href="#">服务二</a></li> |
</ul> |
</li> |
<li><a href="#">成功案例</a> |
<ul> |
<li><a href="#">案例三</a></li> |
<li><a href="#">案例</a></li> |
<li><a href="#">案例三案例三</a></li> |
<li><a href="#">案例三案例三案例三</a></li> |
</ul> |
</li> |
<li><a href="#">关于我们</a> |
<ul> |
<li><a href="#">我们四</a></li> |
<li><a href="#">我们四</a></li> |
<li><a href="#">我们四</a></li> |
<li><a href="#">我们四 111 </a></li> |
</ul> |
</li> |
<li><a href="#">在线演示</a> |
<ul> |
<li><a href="#">演示</a></li> |
<li><a href="#">演示</a></li> |
<li><a href="#">演示</a></li> |
<li><a href="#">演示演示演示</a></li> |
<li><a href="#">演示演示演示</a></li> |
<li><a href="#">演示演示</a></li> |
<li><a href="#">演示演示演示</a></li> |
<li><a href="#">演示演示演示演示演示</a></li> |
</ul> |
</li> |
<li><a href="#">联系我们</a> |
<ul> |
<li><a href="#">联系联系联系联系联系</a></li> |
<li><a href="#">联系联系联系</a></li> |
<li><a href="#">联系</a></li> |
<li><a href="#">联系联系</a></li> |
<li><a href="#">联系联系</a></li> |
<li><a href="#">联系联系联系</a></li> |
<li><a href="#">联系联系联系</a></li> |
</ul> |
</li> |
<li><a href="#">在线演示</a> |
<ul> |
<li><a href="#">演示</a></li> |
<li><a href="#">演示</a></li> |
<li><a href="#">演示</a></li> |
<li><a href="#">演示演示演示</a></li> |
<li><a href="#">演示演示演示</a></li> |
<li><a href="#">演示演示</a></li> |
<li><a href="#">演示演示演示</a></li> |
<li><a href="#">演示演示演示演示演示</a></li> |
</ul> |
</li> |
<li><a href="#">在线演示</a> |
<ul> |
<li><a href="#">演示</a></li> |
<li><a href="#">演示</a></li> |
<li><a href="#">演示</a></li> |
<li><a href="#">演示演示演示</a></li> |
<li><a href="#">演示演示演示</a></li> |
<li><a href="#">演示演示</a></li> |
<li><a href="#">演示演示演示</a></li> |
<li><a href="#">演示演示演示演示演示</a></li> |
</ul> |
</li> |
<li><a href="#">在线演示</a> |
<ul> |
<li><a href="#">演示</a></li> |
<li><a href="#">演示</a></li> |
<li><a href="#">演示</a></li> |
<li><a href="#">演示演示演示</a></li> |
<li><a href="#">演示演示演示</a></li> |
<li><a href="#">演示演示</a></li> |
<li><a href="#">演示演示演示</a></li> |
<li><a href="#">演示演示演示演示演示</a></li> |
</ul> |
</li> |
</ul> |
</body> |
</html> |
by: 发表于:2017-11-30 10:52:41 顶(0) | 踩(0) 回复
??
回复评论