动态 CSS 下拉菜单显示与父级相同级别的子菜单

Question

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

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

我不需要任何 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 的情况下完成吗？

提前致谢

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

没有浮动，没有 hack，只有纯 CSS。在 Chrome、Firefox 和 IE11 中测试。在所有这些上都可以完美运行，甚至 IE。 JSFiddle Demo

Answer 2

将 top:36px; 添加到 CSS 中的 nav li:hover>ul>li:hover>ul。那 36 来自每个 li 标签的高度。

在我看来，位置属性是 CSS 中最难理解的部分。我喜欢这个网站的描述，http://reference.sitepoint.com/css/absolutepositioning。

Answer 3

nav li {
    background-color: rgba(0,100,0,0.5);
  
}
nav li:hover {
    background-color: rgba(100,0,0,0.5)
}
nav a {
  display:block;
    padding: 0.5em;
  text-decoration: none;
  color: rgba(0,0,100,0.9);
}

nav ul {
    list-style: none;
    padding: 0;
  text-align:center;
}

nav li {
    position: relative;
    display: inline-block;
}

nav ul ul {
    display: none; 
    position: absolute; 
}

nav li:hover > ul {
    display: block;
}

nav ul ul ul {
    left: 100%; 
    top: 0;
}

nav > ul > li > ul > li {
    min-width: 100%;
}

<nav>
<ul>
<li>
    <a href="#"> 1.First </a>
<li>
    <a href="#"> 2.Second </a>
    <ul>
        <li><a href="#"> 2.1</a>
        <li><a href="#"> 2.2 </a>
            <ul>
            <li><a href="#"> 2.2.1 </a>
            <li><a href="#"> 2.2.2 </a>
                <ul>
                <li> <a href="#"> 2.2.2.1 </a>
                <li> <a href="#"> 2.2.2.2 </a>
                </ul>
            </ul>
    </ul>
<li><a href="#"> 3.Third </a>
    </ul>
</nav>