jquery下拉菜单效果（超简洁实用，兼容IE和firefox等主流浏览器）
分享一个利用jquery实现的下拉菜单效果，代码简洁易修改。这里使用jquery分别实现了两种下拉菜单的效果，其实原理是一样的，经测试是兼容IE，火狐等各大主流浏览器的。下面贴一下这个下拉菜单的效果图。
jquery下拉菜单效果一：
jquery下拉菜单效果二：
下面将效果一的代码贴一下，如果需要效果二的代码的话，可以自己修改或者在下面下载源码即可。
<html xmlns="http://www.phpernote.com/jquery-effects/114.html">
<head>
<title>JQUERY下拉菜单示例</title>
<meta content="text/html; charset=utf-8" http-equiv=Content-Type>
<style type="text/css">
body,html{font: normal 14px "宋体";}
#menu_yhm{width:100%; height:30px}
#menu_yhm ul{padding:0 0; list-style-type:none; margin:0 0;}
#menu_yhm li{position:relative; width:160px; background:#006666; float:left; height:30px; border-right:#fff 1px solid;}
#menu_yhm li a{text-align:center; line-height:30px; width:160px; display:block; height:30px; color:#fff; text-decoration:none;}
#menu_yhm li a:hover{background-color:#990000; color:#ff0;}
#menu_yhm ul ul{z-index:99; position:absolute; width:160px; display:none; background:#900; top:30px; left:0px;}
#menu_yhm ul ul li{position:relative; display:block; background-color:#900; border-top:#fff 1px solid;}
#menu_yhm ul ul ul{z-index:199; position:absolute; width:160px; background:#900; top:-1px; left:161px;}
#menu_yhm li.li01{background:#900;}
#menu_yhm li.li01 a{color:#ff0;}
#menu_yhm li.li01 li a{color:#fff;}
#menu_yhm li.li01 li a:hover{background-color:#000; color:#ff0;}
#menu_yhm li li.li01 a{background:#000; color:#ff0;}
#menu_yhm li li.li01 ul a{color:#fff;}
#menu_yhm li li.li01 ul a:hover{background:#333; color:#ff0;}
</style>
<script language="javascript" type="text/javascript" src="http://www.phpernote.com/js/jquery.min.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function(){
$("#menu_yhm ul li").hover(
function(){
$(this).children("ul").show();
$(this).addClass("li01");
},
function(){
$(this).children("ul").hide();
$(this).removeClass("li01");
});
});
</script>
<body>
<div id="menu_yhm">
<ul>
<li><a href="#">设计前沿</a>
<ul>
<li><a href="#">网页设计</a></li>
<li><a href="#">平面设计</a></li>
<li><a href="#">ui设计</a></li>
</ul>
</li>
<li><a href="#">技术文档</a>
<ul>
<li><a href="#">jquery</a></li>
<li><a href="#">php+mysql</a></li>
<li><a href="#">web前端</a>
<ul>
<li><a href="#">div+css</a></li>
<li><a href="#">psd源文件</a></li>
<li><a href="#">html源码</a></li>
</ul>
</li>
<li><a href="#">常用软件和工具</a></li>
</ul>
</li>
<li><a href="#">电子商务</a>
<ul>
<li><a href="#">b2c网站</a></li>
<li><a href="#">国外优秀商务网站</a></li>
<li><a href="#">服装外贸</a></li>
</ul>
</li>
</ul>
</div>
<p style="margin-top:140px;">本示例由 <a target="_blank" href="http://www.phpernote.com/">php程序员教程网</a> 提供！</p>
</body>
</html>
转载请注明出处：php程序员的笔记
最后修改时间：2013年05月26日 12时27分 文章来源：-わ千与千寻