我通过w3schools网站学习编码，并且在dropbox导航方面遇到问题，我只能用这个代码完成一半的工作；
<html lang="en">
<head>
<title>CSS Template</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
}
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
/* Style the top navigation bar */
.topnav {
overflow: hidden;
background-color: #4682B4;
-
}
/* Style the topnav links */
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change color on hover */
.topnav a:hover {
background-color: #5F9EA0;
color: black;
}
/* Style the content */
.content {
background-color: #f1f1f1;
padding: 30px;
height: 400px;
}
/* Style the footer */
.footer {
background-color: #4682B4;
padding: 10px;
}
/* Style The Dropdown Button */
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {
background-color: #f1f1f1
}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
</style>
</head>
<body>
<div class="topnav">
<a href="#">Store</a>
<a href="#">Village</a>
<a href="#">Forum</a>
<div class="dropdown">
<button class="dropbtn">Profile</button>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
<div class="content">
<h2>Home Page</h2>
</div>
<div class="footer">
<p>Footer</p>
</div>
</body>
</html>我也尝试过这里的下拉导航，到目前为止，它完全破坏了我的代码。我不知道为什么它不能工作
上面的那个"有效"，但只在行的末尾。在"存储"之前添加下拉按钮会导致整行消失，如果我将其移动到导航结束之外的任何位置，也会产生同样的效果。
我可以看到两件事可以帮助您：
- 您缺少下拉类的结束div：
<div class="topnav">
<a href="#">Store</a>
<a href="#">Village</a>
<a href="#">Forum</a>
<div class="dropdown">
<button class="dropbtn">Profile</button>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
</div>
- 您正在为所有
.topnav a标记提供一个float: left。由于您的下拉内容a标记是嵌套的，因此它们不会被该CSS拾取。所以，若您尝试将该下拉内容div放在另一个链接之前，它将永远不会和其他a标记一起向左浮动，而是保持在最后。如果你想重新排列链接的顺序，我建议使用flexbox。这是一种创建响应式导航栏的简单方法
如果你想继续使用float，你需要更改以下CSS：
.dropdown {
/*position: relative;*/
float: left;
display: inline-block;
}