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

标签 html css

<分区>


关于您编写​​的代码问题的问题必须在问题本身中描述具体问题 — 并且包括有效代码 以重现它。参见 SSCCE.org寻求指导。

关闭 9 年前

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

enter image description here

但设计的一个小问题是第 3/4 级菜单固定在树的最顶部。如果它们在二级菜单中锚定到它们自己的“父级”,那就更好了。

我的意思是,如果您将 foobar 添加到菜单项 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 上,而不是锚定在顶部。

如何做到这一点?

enter image description here

最佳答案

像这样编辑这个类:

#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

关于html - CSS 下拉菜单中的第三级需要更智能的垂直对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19228676/

上一篇:html - CSS,垂直对齐表格单元格中的 anchor

下一篇:javascript - 将悬停暂停添加到 jQuery

相关文章:

javascript - 如何在 v3 Google map 上以特定纬度和经度绘制 HTML 元素?

html - 如何删除链接之间的空格?

javascript - 是否可以使用 html/javascript/css 在 img 元素中打洞?

css - bootstrap 非堆叠列号根据屏幕尺寸变化

c# - 如何使用 itextsharp 将 html 页面转换为带有 css 的 pdf?

html - 谁能告诉我为什么位置 :fixed required in cubic-bezier function in CSS?

javascript - 表体来自 Html 但不是来自 Javascript

css - 图像位于 div 底部但在滚动后保持固定

html - 响应式 svg 在 safari 中没有全宽

jquery - 用JS获取元素CSS3背景色渐变