CODEWITHSUNDEEP
cssangular
bathudaide
bathudaide

Reputation: 747

How to fix dropdown menu hover not woking

I try to make dropdown menu but it only works click event, hover event but do not work. Anyone can help me why my code does not work? This is my code below:

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

html code

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

Sorry if my english is bad. Thank you very so much.

Upvotes: 1

Views: 245

Answers (3)

Hassan Siddiqui
Hassan Siddiqui

Reputation: 2845

I Just update your code structure with few CSS changes. Try this I hope it'll help you out. Thanks

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

Upvotes: 1

jitender
jitender

Reputation: 10429

You will need to remove

overflow:hidden from top-nav and float:left from a element

so your css will look like

.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

Upvotes: 1

Zoha Irshad
Zoha Irshad

Reputation: 467

Try using ">" in css.

example:

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

Upvotes: 0

Related Questions