jquery/xialacaidan/ target=_blank class=infotextkey>jquery下拉菜单效果图(横向下拉菜单):

 
1、<ul>与<li>标签中包含呈现下拉菜单的内容: 
 
说明:
最外围的<ul>中元素<li>即为菜单项1、菜单项2、菜单项3,下拉菜单分别在各主菜单之下,如果菜单最外层为ul,一层每个主菜单放在一个li中,如果有子菜单,在这个主菜单的li中建立新的ul,再依次嵌套即可构建多层的菜单。
2、css代码,用于完美呈现下拉菜单效果。
 
ul,li{ 
/*清除ul和li上的小圆点*/ 
list-style:none; 
} 
ul{ 
/*清除子菜单的缩进值*/ 
padding:0; 
margin:0;
} 
.hmain{ 
background-image:url(../images/title.gif); //前面的小三角 
background-repeat:repeat-x; 
width:120px; 
} 
li{ 
background-color:#EEEEEE; //背景图片覆盖背景色 
} 
a{ 
//取消所有的下划线 
text-decoration:none; 
padding-left:20px; 
display:block; /*块集元素可充满区域*/ 
display:inline-block; 
width:100px; 
padding-top:3px; 
padding-bottom:3px; 
} 
.hmain a{ 
color:white; 
background-image:url(../images/collapsed.gif); 
background-repeat:no-repeat; 
background-position:3px center; 
} 
.hmain li a{ 
color:black; 
background-image:none; 
} 
.hmain ul{ 
display:none; 
} 
.hmain{ 
float:left; 
margin-right:1px; 
}<strong> 
</strong>
3、jquery代码部分,也是jquery下拉菜单的核心代码部分。
在Html中引用js文件jquery.js和menu.js,其中menu.js如下: 
 
jquery下拉菜单制作完成了。
知识点:
例如:.main a和.main>a的不同之处,前者选择使用.main的这个class的元素内容所有的a节点,后者只选择.main的子节点中的a节点。