如何修复下拉菜单悬停未醒来

Question

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

====

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

网页代码

.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

您需要

删除

从top-nav overflow:hidden，从a元素float:left

所以你的 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;
}

工作演示

Answer 2

我只是用很少的 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>

Answer 3

尝试在 css 中使用 ">"。

例：

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