Question

I have a menu in a horizontal list and vertical submenus below. I have a simple JQuery script that shows the child <ul> when a parent is hovered over:

$('#menulist li').hover(
function() {
  $(this).children('ul').stop().fadeIn(200);
},
function () {
    $(this).children('ul').stop().fadeOut(200);
  }
);

My issue is that the child ul do not position themselves under their respective parent list items.

Short of hard coding a margin-left for each child UL, does anyone know a way to get around this?

Recreation of issue here: http://jsfiddle.net/MeltingDog/S8smw/5/

CSS:

#menulist ul li {
  display: inline;
  list-style-type: none;
  padding-right: 10px; 
}

#menulist ul li ul{
    display:none;
    background-color:#FFF;
    padding: 10px;
    position: absolute;
    z-index: 100;
}

Answer 1

Add position:relative to the parent li, as follows, also give some offset to the child ul:

#menulist ul li {position:relative;}
#menulist ul li ul{top:30px;left:0;}