当我们想把一个大的子菜单放在一个有限的导航菜单空间中时，我们通常会用下拉菜单的形式来弥补空间的不足。本文将带您在最短的时间内使用jQuery和CSS制作一个动态下拉菜单。

XHTML的第一步是在页面的头部引入jquery库，这是必须的。

脚本类型=' text/JavaScript ' src=' http : js/jquery . js '/脚本然后我使用一个无序列表来构建菜单。

Ul class='menu' lia href='# '主页/a/Li lia href=' # ' service/a/Li lia href=' # ' case/a/Li lia href=' # ' about/a/Li lia href=' # ' BLOG/a/Li/ul一目了然，看起来非常简洁。并将图片放在菜单列表的顶部。

img src=' http : nav . gif ' width=' 184 ' height=' 32 ' class=' menu _ head '/CSS为菜单创建CSS样式，请参见代码：menu _ head { border :1 px solid # 998675；背景：#f30}。菜单{ display:none宽度width:184pxborder:1px固体# 998675；border-top:none}。菜单Li { list-style : none；背景：#493e3b}。菜单阿利{ padding:10px显示：块；color: # fff文本装饰： none；} .菜单Li a : hover { font-weight : bold；} .菜单Li . alt { background : # 362 f2d；}值得注意的是。menu li.alt style用于区分奇数行换行和偶数行换行，这将反映在下面的jquery代码中。jQuery在JQuery代码中，首先我想要一个下拉菜单来区分行数，并给偶数行一个样式：alt。然后给图片按钮添加一个点击触发事件。单击按钮时，可以切换下拉菜单。

$(function(){ $(')。菜单li:even ')。add CLaSS(' alt ')；$('img.menu_head ')。单击(function(){ $(')。菜单')。slide Toggle(' fast ')；});});注意，我使用jQuery的slideToggle方法，以滑动的方式显示和隐藏菜单，效果非常流畅。

正是上面分享的jQuery结合CSS做了一个动态下拉菜单，希望对大家的学习有所帮助。