html - CSS 下拉菜单中的第 3 级需要更智能的垂直对齐方式

Question

现有问题how-to-add-a-3rd-level-to-my-css-drop-down-menu在 jsfiddle 上有一个经典的代码片段和工作示例，以向原始海报展示如何做到这一点。结果如下所示：

但设计的一个小问题是第 3 层/第 4 层菜单锚定在树的最顶部。如果他们在第二级菜单中锚定到他们自己的“父母”会更好。

我的意思是，如果您将foo和bar添加到菜单项Level 2-A-4 中，如下所示：

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

...那么他们应该挂在Level 2-A-4上，而不是锚定在顶部。

这该怎么做？

Answer 1

标记

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

这将满足您的需求。它是可扩展的。您可以使用任意数量的子级别。

Answer 2

试试这个修改后的代码。http://jsfiddle.net/Wss5A/146/ 我所做的只是将顶部更改为top: auto;并使用顶部添加负边距margin-top -27px;

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

Answer 3

您可以删除和更改和top:0的顺序：lispan

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

Answer 4

只需像这样编辑这个类：

#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