jQuery实现的精美平滑二级下拉菜单效果代码

本文实例讲述了框架实现的精美平滑二级下拉菜单效果。分享给大家供大家参考，具体如下：

这是一款jQurey实现的向下二级导航菜单效果。效果非常不错，由上到下平滑延伸，给人的感觉协调唯美！射流研究…与超文本标记语言代码结构简单明了，便于使用与修改！

运行效果截图如下：

具体代码如下：

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' hearteta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8' /titlejQuery实现精美二级菜单——js特效大全/title style type=' text/CSS ' * { margin :0；划水：0;} body { font :12 px/normal Arial，Helvetica，无衬线；}ul，ol {列表式：无；} a img { border:none} #内容{ width :800 pxmargin :30 px汽车；}.main _ nav { width :100%；高度：30 px}.main _ nav ul li { float:left宽度宽度：190像素高度：30 px右边框：1px实心# 666;位置：相对；}.主导航阿利{显示：块高度：30 px线高：30 px文本对齐：居中；背景技术： # 333;color: # ccc文本装饰：无；}.main _ nav ul Li dl {位置：绝对；left :0 to :30 px宽度width :190 pxdisplay : none }。main _ nav ul Li dl DD { height :31 px；}.main _ nav ul Li dl DD a {显示块：高度：30 px线高：30 px文本对齐：居中；颜色：白色；背景： # 555;边框-底部：1px实心# 666;}.main _ nav ul Li dl DD a :悬停{背景： # 333；color: # ccc}。单击{ margin-top :200 px；}/style/head dydiv id=' content ' div class=' main _ nav hover ' ul lia href=' # title=' js特效大全'网页特效/a dl dda href='#' title='js特效大全'网页特效/a/dd dda href='#' title='js特效大全'网页特效/a/dd dda href='#' title='js特效大全'网页特效/a/dd dda href='#' title='js特效大全'网页特效/a/dd dda href='#' title='js特效大全'网页特效/a/dd /dl /li lia特效大全'网页设计/a dl dda href='#' title='js特效大全'网页设计/a/dd dda href='#' title='js特效大全'网页设计/a/dd dda href='#' title='js特效大全'网页设计/a/dd dda href='#' title='js特效大全'网页设计/a/dd dda href='#' title='js特效大全'网页设计/a/dd dda href='#' title='js特效大全'网页设计/a/dd dda href='#' title='js特效大全'网页设计/a/dd /dl /li lia网页制作/a dl dda href='#' title='js特效大全'网页制作/a/dd dda href='#' title='js特效大全'网页制作/a/dd dda href='#' title='js特效大全'网页制作/a/dd dda href='#' title='js特效大全'网页制作/a/dd dda href='#' title='js特效大全'网页制作/a/dd /dl /li lia网站优化/a dl dda href='#' title='js特效大全'网站优化/a/dd dda href='#' title='js特效大全'网站优化/a/dd dda href='# ' title='js特效大全'网站优化/a/dd dda href='#' title='js特效大全'网站优化/a/dd dda href='#' title='js特效大全'网站优化/a/DD/dl/Li/ul/div/div脚本类型=' text/JavaScript ' src=' http : jquery-1。 4 .2 .量滴js '/script脚本类型=' text/JavaScript ' $(').悬停ul Li ').悬停(function(){ $(this)).儿童(“dl”).slideDown(300)}，function(){ $(this).儿童(“dl”).向上滑动(100)})；/脚本/正文/html更多关于框架相关内容感兴趣的读者可查看本站专题： 《jQuery拖拽特效与技巧总结》 、 《jQuery扩展技巧总结》 、 《jQuery常见经典特效汇总》 、 《jQuery动画与特效用法总结》 、 《jquery选择器用法总结》 及《jQuery常用插件及用法总结》

希望本文所述对大家框架程序设计有所帮助。