Question

I’m pretty sure I’m not getting the hierarchy in css for building this. I can’t seem to find a place that will actually explain it to me, and how each level works. I’ve found some that show, but when you build it if you don’t know, at least for me, it’s kind of hard to see. Never really used css suprisingly until now. If someone wouldn’t mind pointing out my error and explaining it please. 🙂

I’m just trying to add a 2nd drop down (a drop down to my drop down) that will show up horizontally under the initial hidden drop down, when selecting the correct one so the correct php id will populate in the link. I included the PHP just so if I put it in wrong someone could point that out to me as well.

also to add: the 2nd level hidden drop down links seem to be there when I hover over “project” instead of when hovering over the populated projects like it should. The weird thing is the links don’t actually show up (not visible), but if i put my mouse there ie lets me know theres a link.

http://jsfiddle.net/HHwLH/

Answer 1

In your css

#navbar li:hover ul, #navbar li.hover ul {
    position: absolute;
    display: inline;
    left: 0px;
    width: 100%;
    margin: 0px;
    padding: 0px;
}

your sub menu and sub sub menu is affected by this.
When you hover on the li all ul descendants will be affected (submenu and subsubmenu)
in your markup the uls are children of the li so you can use the children selector instead of the descendant selector to only show the direct child menu/ul.

#navbar li:hover > ul, #navbar li.hover > ul {
    position: absolute;
    display: inline;
    left: 0px;
    width: 100%;
    margin: 0px;
    padding: 0px;
}

This will work for both submenu and subsubmenu

FIDDLE