CSS下拉菜单中的第三级需要更智能的垂直对齐 [英] 3rd level in CSS drop down menu needs smarter vertical alignment

问题描述

现有的问题

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:

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?

解决方案

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

这篇关于CSS下拉菜单中的第三级需要更智能的垂直对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！