我想显示两个下拉菜单，但我遇到了一些问题。
我的第二个下拉菜单无法正常工作。第一个工作正常，但当我指定第二个时， block 不起作用/更改。
是否与 CSS 或 HTML 有冲突？
我该如何处理才能显示第二个下拉菜单？
body {
margin: 0;
padding: 0
}
/*first navigation menu*/
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);
z-index: 1;
}
.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;
}
/*end first navigation menu*/
/*second navigation menu*/
.nav2 ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: deepskyblue;
}
.nav2 li {
float: left;
}
.nav2 li a, .dropbtn2 {
display: inline-block;
color: yellow;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.nav2 li a:hover, .dropdown2:hover .dropbtn2 {
background-color: deeppink;
}
li.dropdown2 {
display: inline-block;
}
.dropdown2-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;
}
.dropdown2-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown2-content a:hover {background-color: deeppink}
.dropdown2:hover .dropdown2-content {
display: block;
} <html>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li class="dropdown">
<a href="javascript:void(0)" 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>
</ul>
<div class="nav2">
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li class="dropdown2">
<a href="javascript:void(0)" class="dropbtn2">Dropdown</a>
<div class="dropdown2-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</li>
</ul>
</div>
<h3>Dropdown Menu inside a Navigation Bar</h3>
<p>Hover over the "Dropdown" link to see the dropdown menu.</p>
</body>
</html>最佳答案
好的，请看下面的工作示例。我所做的只是通过将“下拉行为”与每个下拉列表的特定样式分开来清理您的 CSS 代码。第一个下拉菜单的原始 CSS 与下拉菜单 2 的 CSS 混淆。
body {
margin: 0;
padding: 0
}
/*dropdown behavior*/
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a, .dropbtn {
display: inline-block;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
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);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown:hover .dropdown-content {
display: block;
}
/*end dropdown behavior*/
/*end first navigation menu*/
/*first navigation menu*/
li a, .dropbtn1 {
color: white;
}
li a:hover, .dropdown1:hover .dropbtn1 {
background-color: red;
}
li.dropdown1 {
display: inline-block;
}
.dropdown1-content a:hover {background-color: #f1f1f1}
/*end first navigation menu*/
/*second navigation menu*/
.nav2 ul {
background-color: deepskyblue;
}
.nav2 li a, .dropbtn2 {
color: yellow;
}
.nav2 li a:hover, .dropdown2:hover .dropbtn2 {
background-color: deeppink;
}
.dropdown2-content a:hover {background-color: deeppink}<html>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li class="dropdown dropdown1">
<a href="javascript:void(0)" class="dropbtn dropbtn1">Dropdown</a>
<div class="dropdown-content dropdown1-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</li>
</ul>
<div class="nav2">
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li class="dropdown dropdown2">
<a href="javascript:void(0)" class="dropbtn dropbtn2">Dropdown</a>
<div class="dropdown-content dropdown2-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</li>
</ul>
</div>
<h3>Dropdown Menu inside a Navigation Bar</h3>
<p>Hover over the "Dropdown" link to see the dropdown menu.</p>
</body>
</html>关于html - 下拉菜单问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52522479/