css - 动态 CSS 下拉菜单显示与父级处于同一级别的子菜单

Question

我正在尝试使用纯 CSS 和 HTML 创建一个多级弹出菜单。我已经试过了this answer以及this one ，但是它们都从菜单顶部的第三层开始，而我希望第三层(及更高层)从与父菜单项相同的高度开始。
我尝试了绝对定位并使用 top 属性将其下推，但这不再是动态的，并且需要在菜单发生变化时进行更改，这不是我想要的。

如果可能的话，我想避免 float 整个菜单，因为这会破坏标题中的其他内容，并有可能破坏网站布局。
如果所有文本都比父级短，我还希望第一个子菜单(下拉菜单)至少具有与父级相同的宽度。

我不需要任何 IE Hacks，因为该站点将仅与最新的 Chrome 和 Firefox 版本一起使用。代码应该是有效的 HTML5/CSS3。

HTML:

<header id="header-box">
    <div id="header">
        <nav class="primary">
            <ul>
                <li class="current"><a href="#">Home</a></li>
                <li class="link"><a href="#">Some Menu 2</a>
                    <ul>
                        <li class="link"><a href="#">SubMenu 1 - 1</a></li>
                        <li class="Link"><a href="#">SubMenu 1 - 2</a>
                            <ul>
                                <li class="link"><a href="#">SubMenu 2 - 1</a></li>
                                <li class="link"><a href="#">SubMenu 2 - 2</a>
                                    <ul>
                                        <li class="link"><a href="#">SubMenu 3 - 1</a></li>
                                    </ul>
                                </li>
                                <li class="link"><a href="#">SubMenu 2 - 3</a></li>
                            </ul>
                        </li>
                        <li class="link"><a href="#">SubMenu 1 - 3</a></li>
                    </ul>
                </li>
                <li class="link"><a href="#">Long Menu 3</a>
                    <ul>
                        <li class="link"><a href="#">Short 1</a></li>
                        <li class="link"><a href="#">Short 2</a></li>
                    </ul>
                </li>
                <li class="link"><a href="#">Links</a></li>
            </ul>
        </nav>
    </div>
</header>

CSS:

nav {
    font-size: 0; /* Remove annoying whitespace between Nav Elements */
}
nav a {
    font-size: 1rem; /* Restore Font Size */
    padding: 0.5rem;
    display: block;
    white-space: nowrap;
}
nav ul {
    list-style: none; /* Remove Bullets from Lists */
    padding: 0; /* left align the Nav */
}
nav li {
    display: inline-block;
    background-color: #AB2524;
}
nav li:hover {
    background-color: #801B1B;
}
nav li.current, nav li.section {
    background-color: #D3302E;
}
/* SubMenu Definitions */
nav li ul { /* Hide by default */
    display: none;
}
nav li:hover>ul { /* Show Submenu when cursor is on parent */
    display: block;
    position: absolute; /* Make the menu flow out of the box and overflow the content. */
}
nav li:hover>ul>li { /* Dropdown */
    display: block;
}
/* Third Level and below (4th etc.) */
nav li:hover>ul>li:hover>ul { /* Show third level */
    display: inline-block;
    left: 100%;
    /* TODO: Make these submenues appear on the same height (from top of page) as their parent menu item rega*/
}

JSFiddle

这可以不用纯 CSS/HTML 而不 float 整个东西来完成吗？

提前致谢

Answer 1

终于想通了 :) 下面的 CSS 可以解决这个问题。

/* Define some colors for the menu */
nav li {
    background-color: #AB2524;
}

nav li:hover {
    background-color: #801B1B;
}

/* Basic menu declarations */

nav {
    font-size: 0; /* Remove annoying whitespace between Nav Elements (white-space-collapse got moved to CSS4) */
}

nav a {
    font-size: 1rem; /* Restore Font Size */
    padding: 0.5em;
    display: block; /* So we can have padding */
    white-space: nowrap; /* No linebreaks in the menu */
    text-decoration: none;
    color: white;
}

nav ul {
    list-style: none; /* Remove Bullets from Lists */
    padding: 0; /* remove default browser padding */
}

/* Any list item in the menu */
nav li {
    position: relative; /* positioned so this is the reference. Required to be able to have the sub menu show up at the same level */
    display: inline-block;
}

/* All Sub menues */
nav ul ul {
    display: none; /* Hide sub menu by default */
    position: absolute; /* Absolute position to push the sub menu out of the box instead of making the box larger and having the top level menu pushed down */
}

/* Show sub menu on hover */
nav li:hover > ul {
    display: block;
}

/* Any sub menu below the second level (Flyout menues in the dropdown) */
nav ul ul ul {
    left: 100%; /* Pushes the menu to the right of it's parent */
    top: 0; /* Make it appear at the same level as it's parent */
}

/* Make the dropdown menu (first level) at least as wide as it's parent */
nav > ul > li > ul > li {
    min-width: 100%;
}

没有 float ，没有黑客攻击，只有普通的 CSS。在 Chrome、Firefox 和 IE11 中测试。在所有这些工具上都能完美运行，甚至是 IE。 <强> JSFiddle Demo