Show and navigate on a right side submenu when hovering

Issue

I have a button that activates a submenu when hovering.

The problem is I can't make the submenu appear ONLY when the cursor is on top of the button. The submenu is activated when passing over the containing , even if it's not visible.

If I change the hover option to:

.dropdown > .dropbtn:hover + .dropdown-content {display: block;}

the submenu appears when the cursor is over the button but disappears when placing the cursor over the submenu.

All the examples and solutions I find are with the submenu below the menu, not to the side, which does not solve my problem.

.dropbtn {
  background-color: #04AA6D;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  width: 120px;
  height: 52px;
}

.dropdown {
  display: flex;
  position: relative;
}

.dropdown-content {
  display: none;
  position: relative;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown:hover .dropdown-content {
  display: block;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

<div class="dropdown">
  <button class="dropbtn">Dropdown</button>
  <div class="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>

Solution

Consider having a second selector, .dropdown-content:hover alongside .dropbtn:hover + .dropdown-content. This selector would match when the .dropdown-content element itself is hovered. You can combine these two selectors into one rule by combining them with a comma (,) to form a selector list:

.dropbtn:hover + .dropdown-content,
.dropdown-content:hover {
  display: block;
}

.dropbtn {
  background-color: #04AA6D;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  width: 120px;
  height: 52px;
}

.dropdown {
  display: flex;
  position: relative;
}

.dropdown-content {
  display: none;
  position: relative;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropbtn:hover + .dropdown-content,
.dropdown-content:hover {
  display: block;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

<div class="dropdown">
  <button class="dropbtn">Dropdown</button>
  <div class="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>

Answered By - Wongjn