keep the dropdown menu visible even if i mouseout the menu button because i am still hovering over sub-menu links

Question

I have a navmenu and i use css and jquery to display or hide the sub-menus, What i did is when i mouseenter the button i slideDown the ul that holds the links in sub-menu and i use slideUp when i mouseout the button in navmanu, what i can not figure out it, how can i stop the slideUp action if i am hovring the links in sub-menu and activate it if my mouse is not hovering over any link in the submenu??

    #button {
        border:2px solid #04076A;
        margin-top:50px;
        width:100px;
        padding:5px;
        text-align:center;
        background-color:#5555FF;
}

#button:hover {
                background-color:#2AAAFF;
}

#button a {
            font-family:Arial;
            text-decoration:none;
            display:block;
}

#button a:hover {
                color:#fff;
}

#DDMenu {
        width:100px;
        padding:5px;
        border:2px solid #515248;
        display:none;
}

ul {
    margin:0px;
    padding:0px;
    list-style:none;
}

ul li {
        margin:0px;
        padding:0px;
        background-color:#B8B8B0;
        opacity:.1;
}

ul li a {
        display:block;
        text-align:center;
        text-decoration:none;
}

ul li a:hover {
        background-color:#DADAD6;
}

HTML:

<div id="button">
<a href="#">Button 1</a>
</div>

<div id="DDMenu">
<ul>
<li><a href="#">link 1</a></li>
<li><a href="#">link 2</a></li>
<li><a href="#">link 3</a></li>
<li><a href="#">link 4</a></li>
</ul>
</div>

Jquery part:

 $(document).ready(function() {

    $('#hide').click(function(){
    $('#contents').slideToggle();
    return false; // should return false to prevent page loading
    });

    $('#button').mouseenter(function() {
    $('#DDMenu').slideDown();
    });

    $('#button').mouseleave(function() {
    $('#DDMenu').slideUp();
    });
});

Any idea please??

Answer 1

One of the possible solutions:

1) create the wrapper div around the button with subMenu items like

<div id="menu">
  // your code here
</div>

CSS:

#menu {
    width: 100px
}

2) attach slideDown/slideUp events to that div instead of button

$('#menu').mouseenter(function() {
  $('#DDMenu').slideDown();
});

$('#menu').mouseleave(function() {
  $('#DDMenu').slideUp();
});

Test it here: http://jsfiddle.net/KLYBJ/