Showing a div and keeping it visible on hover

Question

What i have now is this fiddle:

http://jsfiddle.net/c2KTZ/

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

But i'm having trouble keeping the menu open when the user if hovering over the menu.

I want to be able to hover over the picture, show the menu, then if the user hovers over the menu i want the menu to stay visible until the user hovers off the menu.

I hope this makes sense if not let me know.

Answer 1

solved - here is the demo http://jsfiddle.net/c2KTZ/1/

Note:- Image id="showoptions" a div to create a parent element you can define width in css for that to use X axis

and moreover you do not need a javascript to do this, can be done only with css using :hover

anyway, code changed in 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>