Question

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

Answer 1

主要问题是您将嵌套列表项设置为＆＃34; display：none＆＃34;。

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

如果希望在父li元素悬停时显示它们，请使用以下css：

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

我做了一个jsfiddle来玩它：

https://jsfiddle.net/1zq1s9ea/

我可能还有其他一些小的变化，例如关闭所有的＆＃39; li＆＃39;标签，但你需要的是我上面提到的那个。

HTML5标签下拉菜单

1 个答案: