当一个大的子菜单是放置在一个有限的导航菜单的空间，我们通常使用下拉菜单来弥补空间的不足，本文将带你用最少的时间，使用jQuery和CSS制作动态下拉菜单。


XHTML

第一个是在页面的头部引入jQuery库，这是必要的。








然后，我使用了一个无顺序表来构建菜单。





首页
服务
案例
关于
博客




看一看，它看起来很简单。因为下拉菜单开始，我还需要设置一个可以触发和下拉的可视按钮。为了便于直接使用图片作为触发按钮，并将图片放在菜单列表的顶部。








CSS

分别设置菜单的CSS样式，并查看代码：




。menu_head { border: 1px solid # 998675；背景：# F30 }
.menu{display:none; width:184px; border:1px solid #998675; border-top:none}
。菜单里{列表样式：无；背景：# 493e3b }
菜单里。{ padding: 10px；显示：块；颜色：# FFF；文字装饰：无；}
菜单李A：悬停{字体重量：粗体；}
。菜单里。ALT {背景：# 362f2d；}



值得注意的是，li.alt。菜单风格是用来区分奇数和偶数行之间的线，它将反映在下面的jQuery代码。

jQuery

在jQuery代码，首先我想做一个下拉菜单行数为偶数的模式之间的区别，然后添加一个图片的ALT键点击触发事件，你可以开关的下拉菜单，当你点击按钮。




$（函数（）{（））
$（。菜单里：即使）。AddClass（ALT）；
$（img。menu_head）。Click（function（）{）
$（菜单）。SlideToggle（快速）；
}）；
}）；



注意，我使用jQuery的slidetoggle方法滑动菜单的显示和隐藏，而且效果很光滑。

以上是jQuery与css的共享，配合动态下拉菜单，希望能帮助大家学习。