'3rd level in CSS drop down menu needs smarter vertical alignment [closed]

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

htmlcss


Solution 1:[1]

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

Solution 2:[2]

markup

<div class="dropdown" style="background-color: white;" tabindex="1">
        <a>Menu</a>
        <ul>
            <li>
                <a>Fruits</a>
                <ul>
                    <li><a>Apple</a></li>
                    <li><a>Orange</a></li>
                    <li><a>Grape</a></li>
                    <li><a>Banana</a></li>
                </ul>
            </li>
            <li>
                <a>Vegetables</a>
                <ul>
                    <li><a>Lemon</a></li>
                    <li><a>Cucumber</a></li>
                    <li><a>Melon</a></li>
                </ul>
            </li>
        </ul>
    </div>

css

.dropdown {
  position: relative;
  display: inline-block;
  font-size: 110%;
}
.dropdown ul {
  position: absolute;
  top: -100%;
  left: 100%;
  display: none;
  background-color: inherit;
  padding: 0;
  list-style: none;
  border: 1px solid #ccc;
}
.dropdown ul li {
  position: relative;
  list-style: none;
  margin: 5px 0;
  background-color: inherit;
}
.dropdown ul li a {
  display: block;
  padding: 3px 10px;
}
.dropdown ul li a:hover {
  background-color: #18b6f2 !important;
}
.dropdown ul li:hover > ul {
  display: block;
  top: 0;
  background-color: inherit;
}
.dropdown ul li:hover > a {
  background-color: #85ddff;
}
.dropdown:hover > ul {
  display: block;
}

This would serve your need. It is scalable. You can do with any number of sublevels.

Solution 3:[3]

You can delete the top:0 and change the sequence of li and span:

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

http://jsfiddle.net/Wss5A/149/

Solution 4:[4]

Try this modified code. http://jsfiddle.net/Wss5A/146/ All I did was change top set to auto and added a negative margin of -27px to the top of the element.

#menu > li > ul li:hover > ul {
    display: block;
    position: absolute;
    left: 100%;
    border-left: solid 3px #fff;
    top: auto;
    width: auto;
    margin-top: -27px;
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Mohsen Safari
Solution 2 Arun Aravind
Solution 3
Solution 4

Related Questions