基于下拉列表 射流研究…实现的两款美观大气的二级导航菜单

本文实例讲述了基于下拉列表。射流研究…实现的两款美观大气的二级导航菜单。分享给大家供大家参考。具体如下：

1.蓝色风格导航菜单

运行效果截图如下：

在线演示地址如下：

http://演示。JB 51。net/js/2015/js-下拉列表-蓝色-样式-导航-菜单-代码/

具体代码如下：

！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' /title漂亮的js css横向二级导航条-蓝色/title style body { padd :0 px；Helvetica阿里亚尔无衬线；font-size :14 px背景-color : # fff；}ul，Li { padd :0 pxmargin :0 px列表样式类型：无；} a { text-decoration : nonecolor : # 003971 } a : hover { color : # 000 }/*导航菜单*/# NavMenu { width :960 px；余量：20px汽车；高度： 44px线高： 44px显示：块；飞越：隐藏；背景： URL(图片/_ nav _ BG。jpg)repeat-x；} # NavMenu ul { width :95%；左填充：8 px背景：网址(图片/_ nav _ l . jpg)无重复；float:left}#navMenu .一个链接{ background-image :无；} # NavMenu _ r { padding-right :8 px；背景：网址(图像/_导航_ r . jpg)否-右重复；右浮动：高度：44px} #导航菜单li {宽度：108px文本对齐：居中；向左浮动：线高：44 px高度： 44px背景-image : URL(images/_ nav _ fg。jpg)；背景-重复：不重复；背景-位置： 0中心；边距-左侧：-2px；} #导航菜单阿利{ color: # fff字体系列： '宋体；填充-右侧： 1em左填充左侧： 1em边距-左： 2px显示器：块；} #导航菜单阿利：悬停{背景：网址(图像/_导航_悬停。jpg)无重复中心；文本装饰：无；color: # FFf}/* -下拉菜单- */.DropMenu {位置：绝对；top : 0；z指数：100;宽度： 164像素；可见性：隐藏；页边距-顶部：-2px；边距-左侧：-2px；}.李。end { background : URL(images/_ sub _ bottom。jpg)无重复；左填充：6 px高度：12px}。DropMenu Li {背景： URL(images/_ sub _ BG。jpg)；padding:8px 0 0 6px }。dropMenu阿利{宽度： 92%；显示器：块；文本对齐：居中；颜色：黑色；padd : 5px 0 5px 0 pxcolor : # 000 }。DropMenu a :悬停{文本装饰：下划线；color : # 003971 }/style/head dybr/br/p style=' text-align : center；color : # 000 ' font-size :15 px；'js css横向二级导航条-蓝色/pbr/br/div id=' NavMenu ' ul Li class='一个链接' a href='/'主页/a/Li lia href=' # ' HTML CSS/a/Li lia href=' # ' rel=' drop menu 1 ' JS代码/a/li lia href='#' rel='dropmenu2 '电子商务/a/li lia href='#' SEO优化/a/li lia href='#' rel='dropmenu3 '建站技巧/a/li lia href='# '零度对策/a/li lia href='# '网络营销/a/Li/ul div id=' NavMenu _ r '/div/div脚本类型=' text/JAVAScript ' src=' images/down。js/script ul id=' drop menu 1 ' class=' DropMenu ' lia href=' # '导航菜单/a/li lia href='# '焦点幻灯片/a/li lia href='# '网页特效/a/li lia href='# '广告代码/a/Li Li class=' end '/Li/ulul id=' DropMenu 2 ' class=' DropMenu ' lia href=' # '企业类网站/a/li lia href='# '行业类网站/a/li lia href='#/'BLOG类网站/a/li lia href='# '门户类网站/a/li lia href='# '商城类网站/a/Li Li class=' end '/Li/ulul id=' Dropmenu 3 ' class=' Dropmenu ' lia href=' # ' HTML技巧/a/li lia href='#'CSS技巧/a/li lia href='#'CMS建站技巧/a/li lia href='# '其他技巧/a/Li Li class=' end '/Li/ulscript type=' text/JavaScript ' CSS下拉列表。 启动chrome(' NavMenu ')/脚本！-//nav-brbr brbr/br/br/br/br/br/br/br/br/br/br/br/div/body/html 2 .桔黄色风格导航菜单

运行效果截图如下：

在线演示地址如下：

http://演示。JB 51。net/js/2015/js-下拉列表-橙色-样式-导航-菜单-代码/

具体代码如下：

！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' /title桔黄色漂亮的js css二级菜单代码/title style body { padd :0 px；Helvetica阿里亚尔无衬线；font-size :14 px背景-color : # 2f2f2f；}ul，Li { padd :0 pxmargin :0 px列表样式类型：无；} a { text-decoration : nonecolor : # CFE0ee } a : hover { color : # Fff } # NavMenu { width :960 pxm margin :20 px汽车；高度： 44px线高： 44px显示：块；飞越：隐藏；背景：网址(图片/nav _ BG。jpg)repeat-x；} # NavMenu ul { width :95%；左填充：8 px背景：url(images/nav_l.jpg)无重复；float:left}#navMenu .一个链接{ background-image :无；} # NavMenu _ r { padding-right :8 px；背景： URL(images/nav _ r . jpg)无重复右；右浮动：高度：44px} #导航菜单li {宽度：108px文本对齐：居中；向左浮动：线高：44 px高度： 44px背景-image : URL(images/nav _ fg。jpg)；背景-重复：不重复；背景-位置： 0中心；边距-左侧：-2px；} #导航菜单阿利{ color: # fff字体系列： '宋体；填充-右侧： 1em左填充左侧： 1em边距-左： 2px显示器：块；} #导航菜单阿利：悬停{背景：网址(图像/导航悬停。jpg)无重复中心；文本装饰：无；color: # FFf}/* -下拉菜单- */.DropMenu {位置：绝对；top : 0；z指数：100;宽度： 164像素；可见性：隐藏；边距-top :-4px；边距-左侧：-2px；}.李。end { background : URL(images/sub _ bottom。jpg)无重复；左填充：6 px高度：12px}。DropMenu Li {后台： URL(图片/sub _ BG。jpg)；padding:8px 0 0 6px }。dropMenu阿利{宽度： 92%；显示器：块；文本对齐：居中；颜色：黑色；padd : 5px 0 5px 0 pxcolor : # 000 }。DropMenu a :悬停{文本装饰：下划线；color : # fa6e 00 }/style/head dybr/br/p style=' text-align : center；color : # fff ' font-size :15 px；'js css横向二级导航条-桔黄色/pbr/br/div id=' NavMenu ' ul Li class='一个链接' a href=' # ' target=' _ blank '主页/a/Li lia href=' # ' target=' _ blank ' html CSS/a/Li lia href=' # ' rel=' drop menu 1 ' target=' _ blank ' js代码/a/李rel=' dropmenu2 ' target=' _ blank '电子商务/a/li lia href='#' SEO优化/a/Li阿利建站技巧/a/li lia href='#' target='_blank '零度对策/a/li lia href='#' target='_blank '网络营销/a/Li/ul div id=' NavMenu _ r '/div/div脚本类型=' text/JAVAScript ' src=' images/down。 js/script ul id=' drop menu 1 ' class=' DropMenu ' lia href=' # ' target=' _ blank '导航菜单/a/li lia href='#' target='_blank '焦点幻灯片/a/li lia href='#' target='_blank '网页特效/a/li lia href='#' target='_blank '广告代码/a/Li Li class=' end '/Li/ulul id=' Dropmenu 2 ' class=' Dropmenu ' lia href=' # target=' _ blank '企业类网站/a/li lia href='#' target='_blank '行业类网站/a/Li lia href=' #/' target=' _ blank ' BLOG类网站/a/li lia href='#' target='_blank '门户类网站/a/li lia href='#' target='_blank '商城类网站/a/Li Li class=' end '/Li/ulul id=' DropMenu 3 ' class=' DropMenu ' lia href=' # ' target=' _ blank ' html技巧/a/Li lia技巧/a/Li lia target=' _ blank ' CMS建站技巧/a/li lia href='#' target='_blank '其他技巧/a/Li Li class=' end '/Li/ulscript type=' text/JavaScript ' CSS下拉列表。 开始chrome(' NavMenu ')/script/div/body/html希望本文所述对大家的爪哇岛描述语言程序设计有所帮助。