动态二级下拉菜单html,jquery实现漂亮的二级下拉菜单代码

本文实例讲述了jquery实现漂亮的二级下拉菜单代码。分享给大家供大家参考。具体如下：

这里介绍一款基于jquery实现的网站下拉菜单，黑色风格，很漂亮，本菜单需要点击主菜单后的小三角符号才下拉出二级菜单，并不是有些菜单，是鼠标移上主菜单的时候就滑过，至于哪一种，就看个人的喜好了

先来看看运行效果：

在线演示地址如下：

具体代码如下：

/p>

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

jQuery二级菜单

$(document).ready(function(){

$("ul.subnav").parent().append("");

$("ul.topnav li span").click(function() {

$(this).parent().find("ul.subnav").slideDown('fast').show();

$(this).parent().hover(function() {

}, function(){

$(this).parent().find("ul.subnav").slideUp('slow');

});

}).hover(function() {

$(this).addClass("subhover");

}, function(){

$(this).removeClass("subhover");

});

});

body {

margin: 0; padding: 0;

font: 10px normal Arial, Helvetica, sans-serif;

background: #ddd url(images/body_bg.gif) repeat-x;

}

.container {

width: 960px;

margin: 0 auto;

position: relative;

}

#header {

padding-top: 120px;

}

#header .disclaimer {

color: #999;

padding: 100px 0 7px 0;

text-align: right;

display: block;

position: absolute;

top: 0; right: 0;

}

#header .disclaimer a { color: #ccc;}

ul.topnav {

list-style: none;

padding: 0 20px;

margin: 0;

float: left;

width: 920px;

background: #222;

font-size: 1.2em;

background: url(images/topnav_bg.gif) repeat-x;

}

ul.topnav li {

float: left;

margin: 0;

padding: 0 15px 0 0;

position: relative;

}

ul.topnav li a{

padding: 10px 5px;

color: #fff;

display: block;

text-decoration: none;

float: left;

}

ul.topnav li a:hover{

background: url(images/topnav_hover.gif) no-repeat center top;

}

ul.topnav li span {

width: 17px;

height: 35px;

float: left;

background: url(images/subnav_btn.gif) no-repeat center top;

}

ul.topnav li span.subhover {background-position: center bottom; cursor: pointer;}

ul.topnav li ul.subnav {

list-style: none;

position: absolute;

left: 0; top: 35px;

background: #333;

margin: 0; padding: 0;

display: none;

float: left;

width: 170px;

-moz-border-radius-bottomleft: 5px;

-moz-border-radius-bottomright: 5px;

-webkit-border-bottom-left-radius: 5px;

-webkit-border-bottom-right-radius: 5px;

border: 1px solid #111;

}

ul.topnav li ul.subnav li{

margin: 0; padding: 0;

border-top: 1px solid #252525;

border-bottom: 1px solid #444;

clear: both;

width: 170px;

}

html ul.topnav li ul.subnav li a {

float: left;

width: 145px;

background: #333 url(images/dropdown_linkbg.gif) no-repeat 10px center;

padding-left: 20px;

}

html ul.topnav li ul.subnav li a:hover {

background: #222 url(images/dropdown_linkbg.gif) no-repeat 10px center;

}

#header img {

margin: 20px 0 10px;

}

• 网站首页

• 网页菜单

  • ASP导航
  • JSP导航
  • ASP.net导航
  • PHP导航

• 网页特效

  • 层和菜单
  • 鼠标特效
  • 表单特效
  • 表格特效
  • CSS特效
  • jQuery特效
• 搜索引擎
• 博客营销
• 联系我们

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