CSS下拉菜单中的第三级需要更智能的垂直对齐[关闭]答案

【问题标题】：3rd level in CSS drop down menu needs smarter vertical alignment [closed]CSS下拉菜单中的第三级需要更智能的垂直对齐[关闭]
【发布时间】：2013-10-07 15:25:44
【问题描述】：

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

但设计的一个小问题是第 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，而不是锚定在顶部。

如何做到这一点？

【问题讨论】：

标签： html css

【解决方案1】：

像这样编辑这个类：

#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

【讨论】：

@hawbsl 随时朋友，-29 是你的li 的高度，你可以改变它。

【解决方案2】：

标记

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

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

【讨论】：

【解决方案3】：

试试这个修改后的代码。 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;
}

【讨论】：

无需调整边距。您可以使用下面的那个。

【解决方案4】：

您可以删除top:0并更改li和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/

【讨论】：