Question

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

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

我不需要任何IE浏览器，因为该网站只会与最新的Chrome＆amp; 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%;
}

没有浮动，没有黑客，只是简单的CSS。在Chrome，Firefox和IE11中测试过。在所有这些，甚至IE浏览器上都能完美运行。的 JSFiddle Demo

Answer 2

在CSS中将 top：36px; 添加到导航li：hover＆gt; ul＆gt; li：hover＆gt; ul 。那36个来自你的每个li标签的高度。

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

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

2 个答案: