实现一个最简单的下拉菜单
由于例子比较简单，所以用文本编辑器写了，nodepad++是个不错的选择，有颜色标注还有智能提示，很好用。
先写一个html标签基本结构
<!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <style></style> <script src="jquery-1.7.2.js" type="text/javascript" ></script> <script></script> </head> <body> </body> </html>
接下来写一个列表
<body> <ul class="menu"> <li><a href="#">一级菜单</a> <ul> <li><a href="#">二级菜单A</a></li> <li><a href="#">二级菜单B</a></li> </ul> </li> </ul> </body>
然后接下来写css清除一些无用的东西
*{margin:0; padding:0;border:0} li{list-style-type:none}
加上一些边框之类
.menu li{ border:1px solid #cccccc; width:180px; height:30px; line-height:30px; background-color:#f8f8f8 }
然后让二级菜单隐藏掉
.menu li ul{ position:absolute; left:-999em}
再写一个二级菜单显示的样式
.menu li.on ul{ left:auto}
这样用js来控制on就可以实现下拉菜单了
$(function(){ $(".menu li").mouseover(function(){ $(this).addClass("on"); }) $(".menu li").mouseout(function(){ $(this).removeClass("on"); }) })