Sub-Navigation Dropdown deactivates on mouse-out

Question

I have a menu and a submenu. The submenu needs to display on mouseover, but needs to display below the colored area. When I mouseout of Item 3, the submenu disappears.

I understand why it is disappearing and I am wondering if there is a way make this work. Margin and Padding didn't seem to work on the ul li css.

http://jsfiddle.net/G4dss/

<div id="bg">
    <ul class="menu">
      <li class="first leaf">Item 1</li>
      <li class="leaf">Item 2</li>
      <li class="expanded">Item 3
        <ul class="menu">
          <li class="leaf">Sub-item 1</li>
          <li class="leaf">Sub-item 2</li>
          <li class="leaf">Sub-item 3</li>
        </ul>
      </li>
      <li class="leaf last">Last item</li>
    </ul>
</div>

CSS

#bg {
    background-color: yellow;
    width: 400px;
    height: 50px;
}

ul {
  float: left;
  margin: 0;
  padding: 0;
}
ul li {
  position: relative;
  float: left;
  list-style: none;
  list-style-image: none;
  padding: .5em 1em;
  margin: 0;
  cursor: pointer;
}
ul li ul {
  display: none;
  position: absolute;
  width: 120px;
  left: 0;
  top: 50px;
}

ul li:hover ul {
  display: block;
}

Answer 1

This is happening because you positioned the drop down too far down, you can achieve the same effect by using padding-top and lowering the top, heres a working example

ul li ul {
  top: 20px;
  padding-top: 30px;
}

If you are not familiar with chrome dev tools it sometimes helps to just add borders on your elements when you have issues like this

Answer 2

This is because there is a gap between the Item 3 item, and the <ul> that contains the submenu items. Your top value specified for the submenu is too great, causing it to appear too low and create this gap. When the cursor enters this gap, the menu disappears, because the :hover styles are no longer applied.

One way to fix this is to use a percentage value for top, which takes away the guesswork of figuring out just how many pixels you need to specify for it:

ul li ul {
    top: 100%;
}

Here's a JSFiddle to demonstrate. Hope this helps! Let me know if you have any questions.

EDIT: The above CSS causes the submenu <ul> to appear directly below the end of the bottom of the parent menu item. However, you cannot specify a value greater than 100%, otherwise the same problem will occur and the submenu will appear too low (the gap returns).

One way to address this need is to actually increase the height of the parent menu item. In your case, just make it as high as the yellow background, and the submenu will appear within the green background. So, using this CSS should work in your situation:

#bg > .menu > li{
    height: 70px; /* Same height as yellow #bg element */
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
}

This causes only the main menu items to increase in height (this way all the submenu items won't be too spaced out by increased height too). The box-sizing attribute is to ensure that existing padding on the <li> elements gets factored into the height as well, so the submenu won't appear excessively low. Here's a new JSFiddle to demonstrate. Hope this was helpful!

Answer 3

This happend because you use top: 50px. Change to this:

ul li ul {
  display: none;
  position: absolute;
  width: 120px;
  left: 0;
  /*top: 50px; remove this*/
  padding-top:10px; /*Add this*/
}

fiddle