Html CSS下拉菜单中的第三级需要更智能的垂直对齐

现有的问题有一个经典的代码片段和JSFIDLE上的工作示例，向原始海报展示了如何做到这一点。结果如下所示：

但这种设计的一个小问题是，3/4级菜单定位在树的最顶端。如果他们在第二级菜单中锚定到自己的父级，那就更好了

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

。。。然后他们应该悬挂在2-A-4层，而不是固定在顶部

如何做到这一点

加价

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

这将满足你的需要。它是可伸缩的。您可以处理任意数量的子级别。

尝试此修改后的代码。 我所做的只是从上到下的改变：自动；并使用margintop-27px在顶部添加了一个负边距

您可以删除顶部：0并更改li和span的顺序：

---

只需按如下方式编辑此类：

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

---

不需要调整保证金。您可以使用下面的一个。@hawbsl任何时候，伙计，-29是您的身高，您可以更改它。

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

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

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

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