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

尝试在CSS中使用“>”。

示例：

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

Answer 2

您将需要删除

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

如何解决下拉菜单悬停不醒的问题

3 个答案: