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

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

How to do this?

enter image description here


just edit this class like this :

#menu > li > ul li:hover > ul{
    border-left:solid 3px #fff;
    top:inherit;                  /*changed*/
    margin-top:-29px;             /*added*/


Answered By – Mohsen Safari

Answer Checked By – Mildred Charles (AngularFixing Admin)

Leave a Reply

Your email address will not be published.