在我的網站,我可以創建1級子菜單,它的工作。但2級子菜單不起作用。請幫忙 。如何使用jQuery創建多級下拉菜單?
這是我的HTML代碼
<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#"> Menu2 <img alt="" src="Images/warning.png" style=" border:0px;" /></a>
<ul id="subnav">
<li><a href="#">SubMenu1</a></li>
<ul>
<li><a href="#">Sub1Sub2menu1</a></li>
<li><a href="#">Sub1Sub2menu2</a></li>
<li><a href="#">Sub1Sub2menu3</a></li>
</ul>
<li><a href="#">SubMenu2</a></li>
<li><a href="#">SubMenu3</a></li>
<li><a href="#">SubMenu4</a></li>
<li><a href="#">SubMenu5</a></li>
<li><a href="#">SubMenu6</a></li>
<li><a href="#">SubMenu7</a></li>
</ul>
</li>
<li><a href="#">Menu3 <img alt="" src="Images/warning.png" style=" border:0px;" /></a>
<ul>
<li><a href="#">Sub1Menu1</a></li>
<li><a href="#">Sub1Menu2</a></li>
</ul>
</li>
<li><a href="#">Menu4</a></li>
<li><a href="#">Menu5</a></li>
</ul>
,這是我的CSS:
#nav
{
margin:0; padding:0; list-style:none; width:640px; height:37px;
}
#nav li
{
float:right; display:block; width:124px; position:relative; z-index:500; text-decoration:none;
}
#nav li a
{
display:block; height:37px; line-height:37px; text-decoration:none; color:#fff; text-align:center; color:#000;
}
#nav li a:hover
{
color:Green;
}
#nav a.selected
{
color:#000;
}
#nav ul
{
position:absolute; right:0; display:none; padding:0; list-style:none; background-color:#c5c9cc; border: solid 1px #c5c9cc;
-moz-border-radius: 0 0 10px 10px; border-radius: 0 0 10px 10px;
}
#nav ul li
{
width:124px; float:right;
}
#nav ul ul
{
width:124px; float:right; margin:0px 124px 0px 0px; display:block; border-radius: 10px 0 0 10px;
}
#nav ul a
{
display:block; height:30px; color:#000; line-height:30px; text-decoration:none;
}
#nav li ul ul {
margin:0px 124px 0 10px;
}
#nav ul a:hover
{
text-decoration:none;
}
*html #nav ul
{
margin:0 0 0 -2px;
}
這是我的jQuery代碼:
<script type="text/javascript">
$(document).ready(function() {
$('#nav li').hover(
function() {
//show its submenu
$('ul', this).slideDown(200);
$('#subnav ul', this).css({ visibility: "hidden" });
},
function() {
//hide its submenu
$('ul', this).slideUp(200);
}
);
$('#subnav').hover(
function() {
//show its submenu
$('#subnav ul', this).css({ visibility: "visible" });
$('#subnav ul', this).slideDown(200);
},
function() {
//hide its submenu
$('#subnav ul', this).slideUp(200);
}
);
});
</script>
我假設你創造這個教育目的。我的意思是認真的,我們是否需要另一個dropdowndownmenu,當時已經有600萬:http://www.google.co.uk/#hl=zh-CN&xhr=t&q=jquery+dropdown+menu – 2011-05-16 07:59:01
我查了200-300多個網站來自谷歌。但我找不到我的答案。 – 2011-05-16 10:26:34