html - 3rd level in CSS drop down menu needs smarter vertical alignment -
the existing question how-to-add-a-3rd-level-to-my-css-drop-down-menu has classy code snippet , working example on jsfiddle show original poster how it. result looks this:

but small issue design 3rd/4th level menus anchored top of tree. better if anchored own "parent" in 2nd level menu.
what mean is, if add foo , bar menu item level 2-a-4 so:
<li><span>level 2-a-4</span> <ul> <li><span>foo</span></li> <li><span>bar</span></li> </ul> </li> ... should hang off level 2-a-4, not anchor top.
how this?

just edit class :
#menu > li > ul li:hover > ul{ display:block; position:absolute; left:100%; border-left:solid 3px #fff; top:inherit; /*changed*/ margin-top:-29px; /*added*/ width:auto; }
Comments
Post a Comment