您的位置：首页 > Web前端 > CSS

CSS实现横向弹出菜单

2007-11-08 23:15 267 查看
CSS实现横向弹出菜单实例：

Code


<!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</a>" lang="zh-CN">


<head>


<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />


<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{...}{


background:#999;


}




#nav li ul {...}{


line-height: 27px; list-style-type: none;text-align:left;


left: -999em; width: 980px; position: absolute; float:left;


}




#nav li ul li{...}{


float: left; width: 80px;


background: #F6F6F6;


}






#nav li ul a{...}{


display: block; width: 80px;text-align:center;


}




#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: 0;


}




#nav li.sfhover ul {...}{


left: 0;


}




#content {...}{


clear: left;


}




-->


</style>




<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>




<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>
</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>


</ul>


</body>


</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航