下拉菜单实现很简单，纯钢性铸铁也能实现，但是我不擅长，用jquery也就两行代码，于是就用jquery css实现简单二级下拉菜单导航，分享给大家供大家参考，具体内容如下

运行效果图：

具体代码：第一步：确定导航的超文本标记语言格式

ul id='nav' lia href='# '首页/a ul lia href='#'PHP编程/a/li lia href='#'JAVA编程/a/li lia href='#'RGB对照表/a/li lia href='# '颜色搭配技巧/a/li /ul /li lia href='# '栏目一/a ul lia href='#'PHP编程/a/li lia href='#'JAVA编程/a/li lia href='#'RGB对照表/a/li lia href='# '颜色搭配技巧/a/li /ul /li ul第二步：CSS实现导航效果

# nav {线高： 24px列表样式类型：无；背景技术： # 666;} #导航a {显示：块；宽度： 100像素；文本对齐：居中；} # nav a :链接{ color : # 666文本装饰：无；} # nav a :已访问{ color : # 666文本装饰：无；} # nav a :悬停{ color : # FFF；文本装饰：无；字体粗细：加粗；} #nav li {左侧浮动：宽度： 100像素；背景# CCC} #导航阿利：悬停{背景： # 999；} # nav Li ul {线高： 27px列表样式类型：无；向左文本对齐：宽度： 180像素；绝对位置：显示器：无；} #nav li ul li{左侧浮动：宽度： 180像素；背景： # F6F 6 } # nav Li ul a { display : }区块宽度： 156像素；向左文本对齐：左填充left :24 px } # nav Li ul a : link { color : # 666；文本装饰：无；} # nav Li ul a :已访问{ color: # 666文本装饰：无；} # nav Li ul a :悬停{ color : # F3F 3；文本装饰：无；字体粗细：正常；} 第三步：jquery实现下拉隐藏效果

$(函数(){ $('#nav li ')).悬停(function() { $(this)).查找(' ul ').show(100)；}，function() { $(this).查找(' ul ').隐藏(300);} );});希望本文所述对大家学习爪哇岛描述语言程序设计有所帮助，教大家通过jquery实现二级导航下拉菜单效果。