日期:2014-05-17  浏览次数:20683 次

CSS下滑菜单修改及兼容性问题
源码html
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link href="style/index.css" rel="stylesheet" type="text/css">
<link rel="shortcut icon" href="images/ma.ico"/>
<link rel="bookmark" href="images/ma.ico"/>

<script type=text/javascript> 
<!--//--><![CDATA[//><!-- 
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>
<div id="warp">
<div class="logo"></div>
<div class="menu">
<ul id="nav">
<li><a href="#">实用工具</a>
<ul>
<li><a href="#">Personal</a></li>
<li><a href="#">Group</a></li>
<li><a href="#">Administrator</a></li>
</ul>
</li>
<li><a href="#">易飞 ERP 系统</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="#">MENU THREE</a>
<ul>
<li><a href="#">sub menu one</a></li>
<li><a href="#">sub menu one</a></li>
<li><a href="#">sub menu one</a></li>
</ul>
</li>
<li><a href="#">MENU FOUR</a>
<ul>
<li><a href="#">sub menu one</a></li>
<li><a href="#">sub menu one</a></li>
<li><a href="#">sub menu one</a></li>
</ul>
</li>
</ul>
</div>
</div&