菜单效果的问题

菜单级别2级
假设：
一级为AA,BB
二级是aa1,aa2,aa3, bb1，bb2,bb3
排列方式是：
AA
aa1
aa2
aa3
BB
bb1
bb2
bb3初始状态是
显示
AA
BB
当鼠标移到AA上就显示他的下面三个二级类，离开后自动隐藏，移到BB上也是一样显示BB的二级类但是这个时候AA的二级类要隐藏起来
具体看看这个：
http://www.wstest.com.cn/test/zlg/000/
但是这个鼠标离开二级类后不能自动隐藏
谢谢！！

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

看了下只有对p.menu_head绑定了mouseover事件如果你想离开二级菜单就自动隐藏的话,最好对你 <div>下的<a> 也进行事件处理
$("#secondpane p.menu_head").mouseover(function()
    {
     $(this).css({backgroundImage:"url(down.png)"}).next("div.menu_body").slideDown(500).siblings("div.menu_body").slideUp("slow");
         $(this).siblings().css({backgroundImage:"url(left.png)"});
});
用的jquery的
你可以把
<p class="menu_head">Header-1</p>
<div class="menu_body">
<a href="#">Link-1</a>
         <a href="#">Link-2</a>
         <a href="#">Link-3</a>
</div>改成
<div class="menu"><p class="menu_head">Header-1</p>
<div class="menu_body">
<a href="#">Link-1</a>
         <a href="#">Link-2</a>
         <a href="#">Link-3</a>
</div></div>然后对menu DIV操作over和out
是不是这样绑定
menu.p.over（out）
menu.div.over（out）
不好意思我对这个jq 了解的不多不知道怎么处理
是这样的吗
简单点，你要的是鼠标移除了div.menu_body的范围就把div.menu_body的内容隐藏了$("#secondpane div.menu_body").hover(function(){
    //do nothing or what u wanna do
},function(){
      $(this).hide();
})；
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Accordion Menu Using jQuery</title>
<script type="text/javascript" language="javascript" src="jquery.js"></script>
<script type="text/javascript">

$(document).ready(function()
{
//slides the element with class "menu_body" when paragraph with class "menu_head" is clicked
$("#firstpane p.menu_head").click(function()
    {
$(this).css({backgroundImage:"url(down.png)"}).next("div.menu_body").slideToggle(300).siblings("div.menu_body").slideUp("slow");
        $(this).siblings().css({backgroundImage:"url(left.png)"});
});
//slides the element with class "menu_body" when mouse is over the paragraph
$("#secondpane div.menu").hover(function()
    {
     $(this).children("p.menu_head").css({backgroundImage:"url(down.png)"}).next("div.menu_body").slideDown(500).siblings("div.menu_body").slideUp("slow");
         $(this).children("p.menu_head").siblings().css({backgroundImage:"url(left.png)"});
},function()
    {
     $(this).children("p.menu_head").siblings("div.menu_body").slideUp("slow");
});
});
</script>
<style type="text/css">
body {
margin: 10px auto;
font: 75%/120% Verdana,Arial, Helvetica, sans-serif;
}
.menu_list {
width: 150px;
}
.menu_head {
padding: 5px 10px;
cursor: pointer;
position: relative;
margin:1px;
    font-weight:bold;
    background: #eef4d3 url(left.png) center right no-repeat;
}
.menu_body {
display:none;
}
.menu_body a{
  display:block;
  color:#006699;
  background-color:#EFEFEF;
  padding-left:10px;
  font-weight:bold;
  text-decoration:none;
}
.menu_body a:hover{
  color: #000000;
  text-decoration:underline;
  }
</style>
</head>
<body>
<div style="float:left; margin-left:20px;"> 
  <p><strong>Works with mouse over </strong></p>
  <div class="menu_list" id="secondpane"> 
       <div class="menu">
<p class="menu_head">Header-1</p>
<div class="menu_body">
<a href="#">Link-1</a>
         <a href="#">Link-2</a>
         <a href="#">Link-3</a>
</div></div>
<div class="menu">
<p class="menu_head">Header-2</p>
<div class="menu_body">
<a href="#">Link-1</a>
         <a href="#">Link-2</a>
         <a href="#">Link-3</a>
</div></div>
<div class="menu">
<p class="menu_head">Header-3</p>
<div class="menu_body">
          <a href="#">Link-1</a>
         <a href="#">Link-2</a>
         <a href="#">Link-3</a>
       </div></div>
  </div>      
</div></body>
</html>
lihui_shine 说下怎么改你这改了我要对照着找不好弄我网站的代码全都是按照隐藏不了的那样写的要改的话太麻烦了
麻烦说下
谢谢
马上给分
http://topic.csdn.net/u/20090712/20/0d0dbe11-6e8a-42c0-94dd-89f37a08702f.html
这个地址的分没人回答的好分数也给你你留个言把在那里谢谢
$("#secondpane div.menu_body").hover(function(){
//do nothing or what u wanna do
},function(){
$(this).hide();
}); //之前的分号是中文的，才会报错
就这个了，顺便问下jquery里的siblings()是干什么的？
$(document).ready(function()
{
//slides the element with class "menu_body" when mouse is over the paragraph
$("#secondpane .menu").hover(
function()
{
$(this).children(".menu_head").css({backgroundImage:"url(down.png)"}).next("div.menu_body").slideDown(500);
},
function()
{
$(this).children(".menu_head").css({backgroundImage:"url(left.png)"}).next("div.menu_body").slideUp("slow");
}
);
})
样式有点不太对
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Accordion Menu Using jQuery</title>
<script type="text/javascript" language="javascript" src="jquery.js"></script>
<script type="text/javascript">

$(document).ready(function()
{
//slides the element with class "menu_body" when paragraph with class "menu_head" is clicked
$("#firstpane p.menu_head").click(function()
    {
$(this).css({backgroundImage:"url(down.png)"}).next("div.menu_body").slideToggle(300).siblings("div.menu_body").slideUp("slow");
        $(this).siblings().css({backgroundImage:"url(left.png)"});
});
//slides the element with class "menu_body" when mouse is over the paragraph
$("#secondpane div.menu").hover(function()
    {
     $(this).children("p.menu_head").css({backgroundImage:"url(down.png)"}).next("div.menu_body").slideDown(500).siblings("div.menu_body").slideUp("slow");
         $(this).siblings().children("p.menu_head").css({backgroundImage:"url(left.png)"});
},function()
    {
     $(this).children("p.menu_head").siblings("div.menu_body").slideUp("slow");
     $(this).children("p.menu_head").css({backgroundImage:"url(left.png)"});
});
});
</script>
<style type="text/css">
body {
margin: 10px auto;
font: 75%/120% Verdana,Arial, Helvetica, sans-serif;
}
.menu_list {
width: 150px;
}
.menu_head {
padding: 5px 10px;
cursor: pointer;
position: relative;
margin:1px;
    font-weight:bold;
    background: #eef4d3 url(left.png) center right no-repeat;
}
.menu_body {
display:none;
}
.menu_body a{
  display:block;
  color:#006699;
  background-color:#EFEFEF;
  padding-left:10px;
  font-weight:bold;
  text-decoration:none;
}
.menu_body a:hover{
  color: #000000;
  text-decoration:underline;
  }
</style>
</head>
<body>
<div style="float:left; margin-left:20px;"> 
  <p><strong>Works with mouse over </strong></p>
  <div class="menu_list" id="secondpane"> 
       <div class="menu">
<p class="menu_head">Header-1</p>
<div class="menu_body">
<a href="#">Link-1</a>
         <a href="#">Link-2</a>
         <a href="#">Link-3</a>
</div></div>
<div class="menu">
<p class="menu_head">Header-2</p>
<div class="menu_body">
<a href="#">Link-1</a>
         <a href="#">Link-2</a>
         <a href="#">Link-3</a>
</div></div>
<div class="menu">
<p class="menu_head">Header-3</p>
<div class="menu_body">
          <a href="#">Link-1</a>
         <a href="#">Link-2</a>
         <a href="#">Link-3</a>
       </div></div>
  </div>      
</div></body>
</html>