3rd level in CSS drop down menu needs smarter vertical alignment

Issue

The existing question how-to-add-a-3rd-level-to-my-css-drop-down-menu has a classy code snippet and working example on jsfiddle to show the original poster how to do it. Result looks like this:

enter image description here

But a small issue with the design is that 3rd/4th level menus are anchored to the very top of the tree. It would be better if they were anchored to their own “parent” in the 2nd level menu.

What I mean is, if you add foo and bar to the menu item Level 2-A-4 like so:

        <li><span>Level 2-A-4</span>
            <ul>
                <li><span>Foo</span></li>
                <li><span>Bar</span></li>
            </ul>
        </li>   

… then they should hang off Level 2-A-4, not anchor to the top.

How to do this?

enter image description here

Solution

just edit this class like this :

#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

Answered By – Mohsen Safari

Answer Checked By – David Marino (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.