0

I've made a dropdown from two different divs. One is the trigger and one the submenu. If the mouse hovers from the trigger to the submenu, the submenu closes. How can I keep it open even when the mouse switches between the two divs?

Also I can't move the submenu-container inside the dropdown-trigger. They need to be two separate divs.

$('.dropdown-trigger,.submenu-container').hover(
  function(){$('.submenu-container').css('display', 'block')},
  function(){$('.submenu-container').css('display', 'none')},
);

Thank you so much in advance!

matthias_h
  • 11,356
  • 9
  • 22
  • 40
Nick
  • 1
  • 1
  • have you tried to remove line "function(){$('.submenu-container').css('display', 'none')}"? – Kajbo Mar 25 '20 at 17:09
  • Yeah, that keeps it just open. But i need to hide it when the mouse leaves the trigger and the submenu – Nick Mar 25 '20 at 17:12
  • you might want to use this ugly solution then https://stackoverflow.com/questions/8557492/how-can-i-trigger-a-mouseout-event-for-two-elements-in-jquery but keep in mind that using timers like thi is generally considered a bad practiced – Kajbo Mar 25 '20 at 17:41
  • Thank you for the link! I've made it work in the Demo! :-D Now i need to translate it into my programming xD @Kajbo – Nick Mar 25 '20 at 18:22
  • Try this [link](https://jsfiddle.net/0u13v7my) – Abhishek Duppati Mar 25 '20 at 18:43

1 Answers1

0

You may not need jquery. you can do by css. Similar way u can do in jquery

.dropdown {
  max-width: 200px;
  list-style: none;
  padding: 10px;
  position: relative;
}
.item {
  display: none;
  padding: 10px 20px;
  border: 1px solid #000;
}
.item.default {
  display: flex;
  justify-content: space-between;
}
.dropdown:hover .item {
  display: block;
}
.dropdown:hover .item.default {
  display: flex;
}
<ul class="dropdown">
      <li class="item default">Select <span>V</span></li>
      <li class="item">1</li>
      <li class="item">1</li>
      <li class="item">1</li>
      <li class="item">1</li>
    </ul>
xdeepakv
  • 7,835
  • 2
  • 22
  • 32