HTML5标签下拉菜单_Html_Css_Drop Down Menu_Nav_Dropdown

HTML5标签下拉菜单

html css drop-down-menu

HTML5标签下拉菜单,html,css,drop-down-menu,nav,dropdown,Html,Css,Drop Down Menu,Nav,Dropdown,为了好玩，我正在制作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&

为了好玩，我正在制作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>

我想我几乎成功了，但它没有显示第二个ul li元素。有人能告诉我我做错了什么吗？

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

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

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

我制作了一个JSFIDLE来处理它：

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

谢谢你，伙计！我还有一个问题。我的代码显示最后一个列表项元素。它没有正确显示列表。你知道我做错了什么吗？您完全是在该菜单中定位所有列表元素，因此它们都显示在菜单顶部。相反，尝试绝对定位ul，并相对于其父元素定位li元素。我调查这个问题的方法是使用Chrome开发者工具（当网站在Chrome中打开时点击f12）。你可以检查页面上的元素，查看所有元素的位置（甚至是不可见的位置）以及css应用于它们的内容。非常感谢！

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

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