CODEWITHSUNDEEP
jquerycssdrop-down-menucross-browserhtml-lists
MeltingDog
MeltingDog

Reputation: 15424

Position submenus under parent menu not working in IE/FF

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?

Upvotes: 0

Views: 1256

Answers (4)

Explosion Pills
Explosion Pills

Reputation: 191749

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;
}

Upvotes: 1

Mark Graham
Mark Graham

Reputation: 171

If you've copied your markup from your site then it could be this which is at fault. Your start and end tags don't match up. I've fixed that here:

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

I've just made some quick amendments to your CSS, which could help you out.

#menu ul 
{
  background: blue;
}
    
#menu ul li 
{
  list-style-type: none;
  width: 100px;
}
    
#menu ul > li
{
  display: inline-block;
  position: relative;
  padding: 10px;
  height: 20px;
  background: red;
}
    
#menu li > ul
{
  display: none;
  position: absolute; left: 0px; top: 40px; z-index: 999;    
  background: yellow;
}
    
#menu li > ul > li
{
  display: block;
  background: green;
}

Upvotes: 0

danielsan
danielsan

Reputation: 446

Simplest way you can get it to sit in the right spot is by positioning it to the parent LI.

add left: 0 to your #menu UL LI UL css declaration and it should start to behave as you want.

Upvotes: 0

JerryHuang.me
JerryHuang.me

Reputation: 1790

No need to re-invent the wheel and more flexible: http://net.tutsplus.com/tutorials/html-css-techniques/how-to-build-a-kick-butt-css3-mega-drop-down-menu/

demo: http://nettuts.s3.amazonaws.com/819_megamenu/demo/index.html

Also, set a fix width if you don't plan on using a flexible layout. Your site breaks when the browser scales down.

Upvotes: 0

Related Questions