如何修复下拉菜单悬停不起作用

Question

我尝试制作下拉菜单，但它只适用于点击事件，悬停事件但不起作用。任何人都可以帮助我为什么我的代码不起作用？这是我的代码如下：

=======================================================

HTML代码

.topnav {
  color: white;
  overflow: hidden;
  background-color: #5f5f5f;
}

.topnav a {
  float: left;
  display: block;
  font-size: 17px;
  color: #f1f1f1;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.topnav a:hover {
  background-color: black;
}

.topnav a:active,
a:focus {
  background-color: #4CAF50 !important;
}

.is-active {
  color: #f1f1f1;
  background-color: #4CAF50;
}

.dropdown-menu {
  padding: 0 !important;
  background-color: #5f5f5f;
  border-radius: 0 !important;
}

.dropdown-menu li a {
  color: white;
  text-align: left;
  width: 100% !important;
}

.m-dropdown-menu:hover>.dropdown-menu {
  display: block;
}

<div class="topnav">
  <a [routerLinkActive]="['is-active']" routerLink="home">Home</a>
  <a [routerLinkActive]="['is-active']" routerLink="about">About</a>
  <a [routerLinkActive]="['is-active']" routerLink="contact">Contact</a>
  <div class="m-dropdown-menu">
    <a href="#" data-toggle="dropdown" class="dropdown-toggle">Dropdown</a>
    <ul class="dropdown-menu">
      <li><a routerLink="#">Reactive form</a></li>
    </ul>
  </div>
</div>

对不起，如果我的英语不好。非常感谢你。

Answer 1

你需要删除

来自overflow:hidden的top-nav和来自float:left元素的a

所以你的CSS会是这样的

.topnav {
  color:white;
  background-color: #5f5f5f;
}

.topnav a {
  display: block;
  font-size: 17px;
  color: #f1f1f1;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.topnav a:hover {
  background-color:black;
}

.topnav a:active, a:focus {
  background-color: #4CAF50 !important;
}

.is-active {
  color: #f1f1f1;
  background-color: #4CAF50;
}

.dropdown-menu {
  padding: 0 !important;
  background-color: #5f5f5f;
  border-radius: 0 !important;
}

.dropdown-menu li a {
  color:white;
  text-align: left;
  width: 100% !important;
}

.m-dropdown-menu:hover > .dropdown-menu {
  display: block;
}

Working demo

Answer 2

尝试在css中使用“>”。

例：

.topnav > a:hover {
  background-color:black;
}

Answer 3

我只是用几个CSS更改来更新你的代码结构。试试这个我希望它会帮助你。谢谢

.topnav {
  color:white;
  background-color: #5f5f5f;
}

.topnav ul {
  list-style: none;
  margin: 0;
  padding: 0 !important;
}

.topnav ul li {
  position: relative;
  display: inline-block;
}

.topnav ul li:hover .dropdown-menu {
  display: block;
}

.topnav a {
  display: block;
  font-size: 17px;
  color: #f1f1f1;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.topnav a:hover {
  background-color:black;
}

.topnav a:active, a:focus {
  background-color: #4CAF50 !important;
}

.is-active {
  color: #f1f1f1;
  background-color: #4CAF50;
}

.dropdown-menu {
  background-color: #5f5f5f;
  border-radius: 0 !important;
  display: none;
  position: absolute;
  width: 150px;
}

.dropdown-menu li a {
  color:white;
  text-align: left;
  width: 100% !important;
}

<div class="topnav">
  <ul>
    <li>
      <a [routerLinkActive]="['is-active']" routerLink="home">Home</a>
    </li>  
    <li>
      <a [routerLinkActive]="['is-active']" routerLink="about">About</a>
    </li>  
    <li>
      <a [routerLinkActive]="['is-active']" routerLink="contact">Contact</a>
    </li>  
    <li>
      <a href="#" data-toggle="dropdown" class="dropdown-toggle">Dropdown</a>
      <ul class="dropdown-menu">
        <li><a routerLink="#">Reactive form</a></li>
      </ul>
    </li>
  </ul>
</div>