2013-07-26 56 views
0

我做了一个鼠标悬停子菜单,一切工作正常。 但是,只要我将鼠标光标移到父节点上,子菜单就消失...jquery mouseover子菜单

即使我从父级移出光标,如何保持子菜单出现?

http://jsfiddle.net/ewG9t/

这是我的代码

$(document).ready(function() { 
    $(".findStore").findMenu(); 
}); 

$.fn.findMenu = function() { 
    var el = $(this); 

    /* for IE 6 */ 
    $("li", el).mouseover(function() { 
     $(this).addClass("hover"); 
    }).mouseout(function() { 
     $(this).removeClass("hover"); 
    }); 

    /* keyboard accessible */ 
    $("a", el).focus(function() { 
     $(this).parents("li").addClass("hover"); 
    }).blur(function() { 
     $(this).parents("li").removeClass("hover"); 
    }); 
} 

.findStore { 
    width:280px; 
    height:500px; 
    background:#f3f3f3 
} 
.findStore ul li { 
    float: left; 
    position: relative; 
    text-align:center; 
} 
.findStore ul li:hover, .findStore ul li.hover a { 
} 
.findStore ul li a { 
    position:relative; 
    display: block; 
    width:40px; 
    height:20px; 
} 
.findStore ul li a:hover, .findStore ul li a:focus, .findStore ul li a:active, .findStore ul li.hover { 
    z-index: 100; 
    text-decoration:none; 
    color:#fff; 
    background:#478414; 
} 
.findStore ul ul { 
    position: absolute; 
    top:20px; 
    left: -9999em; 
} 
.findStore ul ul li { 
    float: left; 
    position: static; 
} 
.findStore ul ul li a { 
    display: block; 
    width:72px; 
    height:20px; 
} 
.findStore ul li:hover ul, .findStore ul li.hover ul { 
    left:0; 
} 


<div class="findStore"> 
    <ul> 
     <li> <a href="#"><span>menu1</span></a> 

      <ul> 
       <li><a href="javascript:openStrNoPop(100000);">sub1</a> 
       </li> 
       <li><a href="javascript:openStrNoPop(112233);">sub1</a> 
       </li> 
       <li> 
      </ul> 
      </li> 
      <li> <a href="#" class=""><span>menu2</span></a> 

       <ul> 
        <li><a href="#">sub2</a> 
        </li> 
       </ul> 
      </li> 
      <li> <a href="#" class=""><span>menu3</span></a> 

       <ul> 
        <li><a href="#">sub3</a> 
        </li> 
       </ul> 
      </li> 
    </ul> 
</div> 
+0

小提琴...... !! –

+0

http://jsfiddle.net/ewG9t/ – user1833620

+0

检查答案 –

回答