本文實例講述了jquery實現鼠標滑過顯示二級下拉菜單效果。分享給大家供大家參考。具體如下：

這是一款jquery實現的下拉菜單，當鼠標移在主菜單上的時候，向下滑出二級子菜單，采用UL LI結構，便于修改完善，我覺得是很實用的菜單，希望大家平時能用得上。

運行效果截圖如下：

在線演示地址如下：

具體代碼如下：

jquery下拉菜單

* { margin: 0; padding: 0; }

body {font-family: Arial, Tahoma, sans-serif; font-size: 11px; color: #232323; }

.wrap { width: 800px; margin: 0 auto; }

#nav { margin: 0; padding: 0; list-style: none; border-left: 1px solid #d5dce8; border-right: 1px solid #d5dce8; border-bottom: 1px solid #d5dce8; border-bottom-left-radius: 4px; -moz-border-radius-bottomleft: 4px; -webkit-border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; -moz-border-radius-bottomright: 4px; -webkit-border-bottom-right-radius: 4px; height: 50px; padding-left: 15px; padding-right: 15px; background: #edf3f7; }

#nav li { float: left; display: block; background: none; position: relative; z-index: 999; margin: 0 1px; }

#nav li a { display: block; padding: 0; font-weight: 700; line-height: 50px; text-decoration: none; color: #818ba3; zoom: 1; border-left: 1px solid transparent; border-right: 1px solid transparent; padding: 0px 12px; }

#nav li a:hover, #nav li a.hov { background-color: #fff; border-left: 1px solid #d5dce8; border-right: 1px solid #d5dce8; color: #576482; }

#nav ul { position: absolute; left: 1px; display: none; margin: 0; padding: 0; list-style: none; -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.2); -o-box-shadow: 0 1px 3px rgba(0,0,0,0.2); box-shadow: 0 1px 3px rgba(0,0,0,0.2); -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.2); padding-bottom: 3px; }

#nav ul li { width: 180px; float: left; border-top: 1px solid #fff; text-align: left; }

#nav ul li:hover { border-left: 0px solid transparent; border-right: 0px solid transparent; }

#nav ul a { display: block; height: 20px; line-height: 20px; padding: 8px 5px; color: #666; border-bottom: 1px solid transparent; text-transform: uppercase; color: #797979; font-weight: normal; }

#nav ul a:hover { text-decoration: none; border-right-color: transparent; border-left-color: transparent; background: transparent; color: #4e4e4e; }

* html #nav ul { margin: 0 0 0 -2px; }

.clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }

.clearfix { display: inline-block; }

html[xmlns] .clearfix { display: block; }

* html .clearfix { height: 1%; }

• 網站主頁
• 關于我
  • Company
  • Authors
  • Advertising
• RSS訂閱
  • PSD
  • Patterns
  • Icons
• 精美博文
  • HTML5
  • CSS3
  • jQuery
  • MySQL
• Web工具
  • Performance
  • CMS Plugins
  • Cheat Sheets
• Originals
  • Website Design
  • Mobile

$(document).ready(function() {

$('#nav li').hover(function() {

$('ul', this).slideDown(200);

$(this).children('a:first').addClass("hov");

}, function() {

$('ul', this).slideUp(100);

$(this).children('a:first').removeClass("hov");

});

});

總結

以上是生活随笔為你收集整理的php实现鼠标悬停显示下拉菜单,jquery实现鼠标滑过显示二级下拉菜单效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。