click - jQuery - hover is triggered even though it shouldn't be -

i have simple jquery drop down this: http://jsfiddle.net/7zvb7/1213/

what want achieve is, if "more" button hovered, drop down menu slidedown, , if cursor leaves "more" or drop down, slideup.

it works, however, if add event when of drop down clicked, whole drop down menu should slideup, doens't work. reason trigger "hover" effect make drop down menu keep flashing.

html:

<div id="table"> <div class="container">                         <a href="#" class="smallredbutton manage">more</a>                         <div class="hidden list">                             <ul>                                 <li>1</li>                                 <li>2</li>                                 <li>3</li>                             </ul>                         </div>                     </div> </div> 

jquery:

$(function() {     $('#table').on('hover', '.container', function(event) {         console.log('hover');         $(this).find('div').slidetoggle(100);             event.preventdefault();     });      $('#table').on('click', '.container li', function(event) {          $(this).parents(".list").slideup('slow').show();      }); })(); 

maybe want: demo

$(function() {     $('#table').on('mouseover', '.manage', function() {         $(this).siblings('div').slidedown('slow');     }).on('mouseleave', '.container', function(event) {         $(this).find('div').slideup('slow');     });      $('#table').on('click', '.container li', function() {         $(this).parents(".list").slideup('slow').show();     }); });