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:

enter image description here

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?

enter image description here

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

jsfiddle


Comments

Popular posts from this blog

c++ - CryptStringToBinary API behavior -

c++ - Correct method for redrawing a layered window -

java.util.scanner - How to read and add only numbers to array from a text file -