CODEWITHSUNDEEP
htmlcss
kulan
kulan

Reputation: 1391

Make drop down menu to stay on hover

I have a dropdown menu which displays on hover. But it has some gap between the parent li, so when I try to move the mouse to the dropdown menu it disappears. What would be the best solution here? Thanks.

https://jsfiddle.net/uz0tw152/

.list1 > li {
  display: inline-block;
  margin-right: 40px;
  vertical-align: top;
}

.list1 > li ul {
  display: none;
  position: absolute;
  margin-top: 30px;
}

.list1 > li:hover ul {
  display: block;
}
<ul class="list1">
  <li>Menu 1
    <ul>
      <li>Submenu 1</li>
      <li>Submenu 2</li>
      <li>Submenu 3</li>
      <li>Submenu 4</li>
    </ul>
  </li>
  <li>Menu 2</li>
  <li>Menu 3</li>
</ul>

Upvotes: 1

Views: 1323

Answers (1)

Stickers
Stickers

Reputation: 78686

Change margin-top to padding-top for the drop down menu.

.list1 > li {
  display: inline-block;
  margin-right: 40px;
  vertical-align: top;
}

.list1 > li ul {
  display: none;
  position: absolute;
  padding-top: 30px;
}

.list1 > li:hover ul {
  display: block;
}
<ul class="list1">
  <li>Menu 1
    <ul>
      <li>Submenu 1</li>
      <li>Submenu 2</li>
      <li>Submenu 3</li>
      <li>Submenu 4</li>
    </ul>
  </li>
  <li>Menu 2</li>
  <li>Menu 3</li>
</ul>

Upvotes: 1

Related Questions