css - 如何修复下拉菜单悬停不工作

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>

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

标签： cssangular

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;
}

工作演示