HTML5 标记下拉菜单

Question

我正在制作 HTML5 dorpdown 菜单是为了好玩。我在 W3Schools 上阅读有关下拉菜单的内容，但他们都在使用 CSS 类和 id's.

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 元素。谁能告诉我我做错了什么？

Answer 1

主要问题是您将嵌套列表项设置为 "display: none"。

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

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

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

我做了一个 jsfiddle 来玩它：

https://jsfiddle.net/1zq1s9ea/

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

HTML5 标记下拉菜单

HTML5 tag dropdown menu

html

css

nav

drop-down-menu

dropdown