显示一个div，并保持其可见悬停

Question

什么，我现在是这样的提琴：

http://jsfiddle.net/c2KTZ/

$(document).ready(
     function(){ 
    $("#showoptions").hover(function() { 
    if ($("#nav").is(":visible")==true) { 
     $("#nav").hide(); 
    } 
    else { 
     $("#nav").show(); 
    }   
     });  
    }); 

但我无法保持菜单中打开时，如果将鼠标悬停在菜单中的用户。

我希望能够将鼠标悬停在图片上，显示菜单，如果用户将鼠标悬停在菜单上，我希望菜单保持可见状态，直到用户将鼠标悬停在菜单上。

我希望这是有道理的，如果不让我知道。

Answer 1

解决 - 这里是演示http://jsfiddle.net/c2KTZ/1/

注： - 图片id="showoptions"一个div创建您可以在css定义width为使用X轴

而且你不需要父元素JavaScript来做到这一点，可以使用:hover

CSS反正只是做了，代码HTML改变

<div id="showoptions"> 
    <img src="images/dropdown.png" width="22px" height="29px" /> 
    <div id="nav"> 
    <table width="100%" id="table"> 
    <tr> 
    <td><a href="<?php echo $user_data['username']; ?>">Account</a></td> 
    </tr> 
    <tr> 
      <td><a href="client.php">Workout</a></td> 
     </tr> 
     <tr> 
      <td><a href="logout.php">Logout</a></td> 
     </tr> 
    </table> 
</div> 
</div> 

Answer 2

导航与更多的联系http://jsfiddle.net/c2KTZ/40/

$(document).ready(
     function(){ 
    $(".link").hover(function() { 
    var link = $(this).attr('id'); 
     var linkid = '#' + link + '-div'; 
    if ($(linkid).is(":visible")==true) { 
     $('.link').removeClass("active"); 
     $(linkid).hide(); 

    } 
    else { 
     $(linkid).show(); 
      $(this).addClass("active"); 
    }   
     });  
    });