Question

我似乎无法让下拉列表发挥作用。刚刚下了HTML和CSS代码。这是：我一直试图解决它，但我无法找到正确的解决方案，只要我将鼠标悬停在按钮上，它就永远不会出现。这是一个学校项目。

＆＃13;

.dropbtn1 {
  background-color: #4CAF50;
  color: black;
  border: none;
  cursor: pointer;
}
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  max-width: 100%;
  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;
}
.dropdown-content a:hover {
  background-color: #f1f1f1;
}
.horizontal-navbar #main-horizontal-navbar-links-dropdown:hover .dropdown-content {
  display: block;
}
.horizontal-navbar li:hover .dropbtn {
  background-color: white;
}
#main-horizontal-navbar-links-dropdown > button {
  border: none;
  display: inline-block;
  background-color: white;
  letter-spacing: 10px;
}

＆＃13;

<ul class="horizontal-navbar">
  <li id="main-horizontal-navbar-links-dropdown">
    <button class="dropbtn1">NEWS</button>
  </li>
  <div class="dropdown-content">
    <a href="#"> AFINEX PARTNERS WITH SPECS FOUNDATION </a>
    <a href="#"> SPECS FOUNDATION REACHES 10,000 BENEFICIARIES </a>
    <a href="#"> EYE TRAIN Featured in Canadian Nationwide TV Broadcast</a>
    <a href="#"> MESSAGE FROM SPECS FOUNDATION PRESIDENT </a>
    <a href="#"> WORLD SIGHT DAY 2015 </a>	
    <a href="#"> NEXT TRAIN ON ITS WAY </a>
    <a href="#"> EYE TRAIN FEATURED IN NEWSPAPER</a>
    <a href="#"> ROTARY CLUB OF SAN MARCELINO </a>
    <a href="#"> GRATITUDE TO CANADIAN DONORS</a>
    <a href="#"> YOUNG VISION </a>
    <a href="#"> SAMAR MISSION 2014 </a>
    <a href="#"> CHILDREN AND AGED ORPHANS MISSION 2014 </a>	
    <a href="#"> AMBULATORY SURGICAL CLINIC AT ST.JOHNS OPENS </a>
    <a href="#"> EYE TRAINING - THE MAKING 1 </a>
    <a href="#"> EYE TRAINING - THE MAKING 2 </a>	
  </div>
  <li class="main-horizontal-navbar-links"> <a href="#" target="_blank"> PROJECTS </a>
  </li>
  <li class="main-horizontal-navbar-links"> <a href="#" target="_blank"> SERVICES </a>
  </li>
  <li class="main-horizontal-navbar-links" style="border-right: none;"> <a href="#" target=""> BENEFITS </a>
  </li>
</ul>

＆＃13;

Answer 1

.dropdown-content不是#main-horizontal-navbar-links-dropdown的孩子，它是兄弟姐妹，因此您必须将选择器更改为此才能使其正常工作：

    .horizontal-navbar #main-horizontal-navbar-links-dropdown:hover ~ .dropdown-content {
        display: block;
    }

Fiddle

文档： https://developer.mozilla.org/en-US/docs/Web/CSS/General_sibling_selectors

Answer 2

试试这个：

删除CSS文件第23行的课程.horizontal-navbar。
</li>之后的<button>错误，请在</div> .dropdown-content之后设置

测试并告诉我们！

下拉按钮赢得了工作

2 个答案: