[FIXED] How to let an css :hover effect stay when mouse is on a daughter element?

Issue

I'm trying to create a only html/css navbar which still looks good and gives me all the standard functionality.

https://imgur.com/a/gmqk4vU

So when the mouse is hovering on the dropdown button it of course expands, changes its color and form. But as soon as I move the mouse into the dropdown menu the button "dropdown" goes back to normal (which I'm not wondering about, this is exactly how it should be, and I can tell why).

How can I get the box stay Orange as long as my mouse is hovering over the dropdown menu?

additionally, for everyone who looks into it: Any ideas on how to fix the bug that when I hover from "dropdown" to "menu 3" the dropdown menu can't go away because it automatically hovers over my mouse?

Code: https://codepen.io/kusenbach/pen/KKezZBK

body {
  margin: 0px;
  outline: none;
}
.navbar {
  width: 100%;
  height: 80px;
  background: #112B3C;
  text-align: center;
  box-sizing: border-box;
  line-height: 80px;
  z-index: 20;
  border-radius: 20px;
  box-shadow: 20px;
}
.item {
  padding: 10px 16px;
  margin: 5px;
  text-decoration: none;
  transition: 0.3s;
  background: #205375;
  border-radius: 50px 50px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.1);
  color: #efefef;
}
.item:hover {
  background: #E79B25;
  border-radius: 10px;
  color: #000;
  box-shadow: 5.0px 9.9px 9.9px hsl(0deg 0% 0% / 0.35);
}

.item.active {
    background-color: #112B3C;
    border: 2px;
    border-color: #efefef;
    border-collapse: collapse;
    border-style: solid;
}
.dropdown {
  position: relative;
  display: inline-block;
  transition: 3s;
}

.dropdown :hover {
    border-radius: 15px 15px 0px 0px;
    
}
.dropdown:hover .dropcontent {
  display: block;
  margin: -15px 0px 0px 5px;
  z-index: 22;
  border-radius: 0px 10px 10px 10px;
  transition: ease;
}
.dropdown:hover .dropcontent a { 
    margin: 5px 0px 5px 0px;
}
.dropdown:hover .dropcontent a:hover {
  border: none;
  border-left: 3px solid #efefef;
  transition: 0.2s;
  border-radius: 0px 50px 50px 0px;
  color: #000;
  margin-left: 5px;
}

.dropdown.content {
    border-radius: 0px 10px 10px 10px;
}

.dropcontent {
  width: 200px;
  background: #E79B25;
  position: absolute;
  margin: -22 0px 0px 5px;
  line-height: 20px;
  border-radius: 0px 10px 10px 10px;
  padding: 10px 5px 5px 5px;
  transition: 0.5s;
  margin-top: -300px;
  z-index: 10;
  box-shadow: 5.0px 9.9px 9.9px hsl(0deg 0% 0% / 0.35);
}

a.active:hover {
    background-color: #E79B25
}
ul {
  padding: 0px;
  margin: 0px;
}
li {
  list-style: none;
}
ul li a {
  color: #efefef;
  padding: 10px 16px;
  text-decoration: none;
  display: block;
  text-transform: uppercase;
  text-align: left;
}
ul li a:hover {

}
form {
  width: 40%;
  float: left;
  margin: 0px 50px;
}

<div class="navbar">
  <ul>
    <a href="" class="item active">menu 1</a>
    <div class="dropdown">
      <a href="" class="item">dropdown</a>
      <div>
        <ul class="dropcontent">
          <li><a href="">submenu 1</a></li>
          <li><a href="">submenu 2</a></li>
          <li><a href="">submenu 3</a></li>
          <li><a href="">submenu 4</a></li>
        </ul>
      </div>
    </div>
    <a href="" class="item">menu 3</a>
    <a href="" class="item">menu 4</a>
    <a href="" class="item">menu 5</a>
  </ul>
</div>

I already tried transition-delay and :focus-within which only worked for sth 'fillable' like a form. And of course I already tried a whole bunch of variations with :hover. I figured out eventually it could work with the + or ~ operator in css but I could not find a useful structure to do that.

My latest try was:

.dropcontent li:hover > a {
  background: #000;
}

But it only changes the color of the child not of the parent.

Solution

add this at the end of your css.

.dropdown:hover .item {
  border-radius: 15px 15px 0px 0px;
  background: #e79b25;
  color: #000;
  box-shadow: 5px 9.9px 9.9px hsl(0deg 0% 0% / 35%);
}

it will solve your first problem i.e, dropdown button goes back to normal while hovering on dropdown content.

as for the bug that happens while moving the mouse from dropdown to menu3 you can use visibility: hidden; and on hover visibility: visible;

instead of using margin.

here is full working snippet.

body {
  margin: 0px;
  outline: none;
}
.navbar {
  width: 100%;
  height: 80px;
  background: #112b3c;
  text-align: center;
  box-sizing: border-box;
  line-height: 80px;
  z-index: 20;
  border-radius: 20px;
  box-shadow: 20px;
}

.drop_div {
  position: absolute;
  left: 0;
  top: 0;
}
.item {
  padding: 10px 16px;
  margin: 5px;
  text-decoration: none;
  transition: 0.3s;
  background: #205375;
  border-radius: 50px 50px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.1);
  color: #efefef;
}
.item:hover {
  background: #e79b25;
  border-radius: 10px;
  color: #000;
  box-shadow: 5px 9.9px 9.9px hsl(0deg 0% 0% / 0.35);
}

.item.active {
  background-color: #112b3c;
  border: 2px;
  border-color: #efefef;
  border-collapse: collapse;
  border-style: solid;
}
.dropdown {
  position: relative;
  display: inline-block;
  transition: 3s;
}

.dropdown :hover {
  border-radius: 15px 15px 0px 0px;
}
.dropdown:hover .dropcontent {
  /* display: block; */
  visibility: visible;
  margin: -15px 0px 0px 5px;
  z-index: 22;
  border-radius: 0px 10px 10px 10px;
  transition: ease;
}
.dropdown:hover .dropcontent a {
  margin: 5px 0px 5px 0px;
}
.dropdown:hover .dropcontent a:hover {
  border: none;
  border-left: 3px solid #efefef;
  transition: 0.2s;
  border-radius: 0px 50px 50px 0px;
  color: #000;
  margin-left: 5px;
}

.dropdown.content {
  border-radius: 0px 10px 10px 10px;
}

.dropcontent {
  width: 200px;
  visibility: hidden;
  background: #e79b25;
  position: absolute;
  margin: -22 0px 0px 5px;
  line-height: 20px;
  border-radius: 0px 10px 10px 10px;
  padding: 10px 5px 5px 5px;
  transition: 0.5s;
  /* margin-top: -300px; */
  z-index: 10;
  box-shadow: 5px 9.9px 9.9px hsl(0deg 0% 0% / 0.35);
}

a.active:hover {
  background-color: #e79b25;
}
ul {
  padding: 0px;
  margin: 0px;
}
li {
  list-style: none;
}
ul li a {
  color: #efefef;
  padding: 10px 16px;
  text-decoration: none;
  display: block;
  text-transform: uppercase;
  text-align: left;
}

form {
  width: 40%;
  float: left;
  margin: 0px 50px;
}

.dropdown:hover .item {
  border-radius: 15px 15px 0px 0px;
  background: #e79b25;
  color: #000;
  box-shadow: 5px 9.9px 9.9px hsl(0deg 0% 0% / 35%);
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="index.css" />
  </head>
  <body>
    <div class="navbar">
      <ul>
        <a href="" class="item active">menu 1</a>
        <div class="dropdown">
          <a href="" class="item">dropdown</a>
          <div class="dropcontent">
            <ul class="">
              <li><a href="">submenu 1</a></li>
              <li><a href="">submenu 2</a></li>
              <li><a href="">submenu 3</a></li>
              <li><a href="">submenu 4</a></li>
            </ul>
          </div>
        </div>
        <a href="" class="item">menu 3</a>
        <a href="" class="item">menu 4</a>
        <a href="" class="item">menu 5</a>
      </ul>
    </div>
  </body>
</html>

Answered By - UNRIVALLEDKING

Answer Checked By - Gilberto Lyons (PHPFixing Admin)