Question

我非常擅长编码，而且我正在努力学习。这是我的问题。我想做一个顶级导航栏，但由于我需要的内容＆＃34;不止一个＆＃34;落下。

我使用w3school学习他们的例子很好，我尝试添加其他选项但是，它并不尊重CSS。为什么？我无法理解:(

我是一个非常非常新手，而且我一直在寻找这个，但也许我的错误很少，而且我不知道＆＃34;究竟是什么＆＃34;我需要寻找。如果已经发布了答案，请抱歉

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#news">Page 2</a></li>

  <li class="dropdown">
    <a href="#" class="dropbtn">Dropdown</a>
    <div class="dropdown-content">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </li>


  <li><a href="#"></a>Dropdown 2</li>
  <li><a href="#"></a>Dropdown 3</li>
  <li><a href="#"></a>Extra</li>
  <li><a href="#"></a>Dropdown 4</li>
  <li><a href="#"></a>Contact</li>
</ul>

</body>
</html>

这就是css

ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}

Answer 1

你太近了。

问题来自您的a标记。您必须使用a标记围绕文字。

CSS并不适用，因为某些css仅适用于a元素。你注意到了。

您的代码：

<li><a href="#"></a>Dropdown 2</li>

解决方案：

<li><a href="#">Dropdown 2</a></li>

直播示例：

https://jsfiddle.net/2ep3a8dh/

Answer 2

你已完成了主要部分。对你想要的任何dropDown做同样的事情。

我的意思是，你应该添加class =＆＃34; dropdown＆＃34;到父母

然后，添加你的dropDown div

＆＃13;

ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}

＆＃13;

<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#news">Page 2</a></li>

  <li class="dropdown">
    <a href="#" class="dropbtn">Dropdown</a>
    <div class="dropdown-content">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </li>


<li class="dropdown"><a href="#">Dropdown 2</a>
    <div class="dropdown-content">
      <a href="#">Link 4</a>
      <a href="#">Link 5</a>
      <a href="#">Link 6</a>
    </div>
</li>
  <li><a href="#"></a>Dropdown 3</li>
  <li><a href="#"></a>Extra</li>
  <li><a href="#"></a>Dropdown 4</li>
  <li><a href="#"></a>Contact</li>
</ul>

＆＃13;

例如，我改变了这个：

<li><a href="#"></a>Dropdown 2</li>

到此：

<li class="dropdown"><a href="#">Dropdown 2</a>
    <div class="dropdown-content">
      <a href="#">Link 4</a>
      <a href="#">Link 5</a>
      <a href="#">Link 6</a>
    </div>
</li>

如何修复此问题并添加多个下拉菜单？

2 个答案: