HTML5 标签下拉菜单答案

【问题标题】：HTML5 tag dropdown menuHTML5 标签下拉菜单
【发布时间】：2016-11-20 17:25:39
【问题描述】：

我正在开发一个 HTML5 dorpdown 菜单来娱乐。我在 W3Schools 上阅读了有关下拉菜单的信息，但它们都使用 CSS 类和 id。

HTML 代码是：

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>Super cool drop down menu</title>
    <link rel="stylesheet" href="style.css" />
</head>
<body>
    <nav>
        <ul>
            <li><a href="#Home">Home</a></li>
            <li>
                <a href="#">Super cool drop down menu!</a>
                <ul>
                    <li><a href="#Link1">Link 1</a>
                    <li><a href="#Link2">Link 2</a>
                    <li><a href="#Link3">Link 3</a>
                </ul>
            </li>
            <li><a href="#Contact">Contact</a></li>
        </ul>
    </nav>


    <h3>Super cool dropdown menu</h3>
    <p>Ga met je muis op Super cool dorp down menu! staan om de linkjes te tonen.</p>
</body>
</html>

style.css 代码如下：

nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

nav ul li {
    float: left;
}

nav ul li a {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

nav ul li a:hover, nav ul li ul li {
    background-color: #f1f1f1;
    display: block;
}

nav ul li ul {
    display: inline-block;
}

nav ul li ul li {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

nav ul li ul li a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

我想我几乎可以使用它，但它没有显示第二个 ul li 元素。谁能告诉我我做错了什么？

【问题讨论】：

标签： html css drop-down-menu nav dropdown

【解决方案1】：

主要问题是您将嵌套列表项设置为“显示：无”。

nav ul li ul li {
    display: none;
    ...
}

如果您希望它们在父 li 元素悬停时出现，请使用类似于以下 css 的内容：

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

我做了一个 jsfiddle 来玩它：

https://jsfiddle.net/1zq1s9ea/

我可能还做了一些其他小的更改，例如关闭所有“li”标签，但您需要的是我上面提到的那个。

【讨论】：

非常感谢朋友！
我还有一个问题。我的代码显示了最后一个列表项元素。它没有正确显示列表。你知道我做错了什么吗？ jsfiddle.net/1zq1s9ea/2
您绝对将所有列表元素定位在该菜单中，因此它们都出现在菜单顶部。相反，尝试绝对定位 ul，并相对于其父元素定位 li 元素。 jsfiddle.net/1zq1s9ea/3 我调查这个问题的方法是使用 Chrome 开发者工具（在 Chrome 中打开网站时按 f12）。您可以检查页面上的元素并查看所有元素的位置（甚至是不可见的）以及应用了哪些 CSS。
哦兄弟，你不想知道我在这个脚本上花了多长时间 xD。非常感谢！