0

Ok, I've been at this for a little while and have my menu displaying correctly for the parent and children.. but I am trying to add a 2nd level of children and I can not get them to display. I thought it was a matter of adding the correct css and prefixing it with an extra UL LI .. but obviously i'm wrong there.

The menu is living here at this jsfiddle - http://jsfiddle.net/Q2tAk/

Ignoring the margins, they look fine combined with the other css.. I just cant get that 2nd sub level menu to show.. I thought it was similiar to this other question on stackoverflow, but so far nothing..

Menu
   -- Child
       -- sub-child
1

2 Answers 2

0

You're almost there, you need to use the css selector > on <li> and not on <a>

For example:

.first-level li > ul.second-level{
    display:block;
}

.second-level li > ul.third-level{
    display:block;
}

Hope that helps you

0

Here's a jsFiddle of the 2nd submenu showing

The issue was twofold. First, the 2nd sub-level wasn't showing because it was hidden behind the 1st sub-menu. This was occurring because they were both positioned in the same location using absolute positioning. To fix this, I altered the nested "#menu li ul" to be positioned in a relative fashion:

#menu li ul {
    position: relative; /*Changed*/
    overflow: hidden;
    display: none;
    ...

The second issue was that both the 1st and 2nd submenus were being displayed when the "#menu li:hover ul" event was triggered. In order to solve this, a direct-child selector can be inserted so that only the direct ul child of the hovered li will be displayed:

#menu li:hover > ul {
    display: block;
}
2
  • The only trouble there, is the menu items move around due to the relative positioning, which I would rather not have.. Nov 19, 2013 at 3:51
  • You can add a height parameter to the #menu li property --> #menu li {height: 50px;}
    – ams
    Nov 19, 2013 at 3:58

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.