Position submenus under parent menu not working in IE/FF

Question

I have two layers of menus - a ul with another nested ul, - A menu with drop down sub menus eg:

<div id="menu">
  <ul>
    <li>Menu item</li>
    <li>Menu item
       <ul>
         <li>Sub Menu item</li>
         <li>Sub Menu item</li>
         </li>
       </ul>
    <li>Menu item
       <ul>
         <li>Sub Menu item</li>
         <li>Sub Menu item</li>
         </li>
       </ul>
    </li>
  </ul>
</div>

The first ul is displayed inline, whilst the 2nd ul is displayed block and is hidden and shown using JQuery.

I have the following CSS to position the sub menus ul under their respecitve parent li:

#menu UL LI {
  list-style-type: none;
  display: inline;
  padding: 10px;
  position: relative;
}
    
    
#menu UL LI UL {
  display: none;
  z-index: 999;
  position: absolute;
}
    
#menu UL LI UL LI {
  display: block;
  width: 100px;
}

My issue is that the submenu items do not appear under their respective parents in FireFox and IE. It does however work fine in Chrome and Safari.

I thought this was the correct way of doing this but does anyone know a better way?

Answer 1

To get to the state you want, several minor changes are needed:

#menu ul li {
+  display: inline-block;
-  padding: 10px;
+  padding: 0 10px 0 10px;
}

#menu ul li ul li {
+  padding: 10px;
}