Перекрытие элементов подменю при наведении курсора на элемент ⇐ CSS

[Anonymous]

Я новичок в создании веб-сайтов, у меня работает панель навигации и добавлен раскрывающийся список с несколькими подменю. Когда я навожу курсор на подменю, элемент подменю открывается и остается открытым, даже если я навожу курсор на другое подменю. Надеюсь, я объясняю это правильно. Я много искал и не могу найти, как предотвратить перекрытие элементов подменю при наведении на них курсора. Надеясь, что кто-то может помочь. Вот HTML-код со стилем подменю и дополнительным CSS, который я использую для своей рабочей панели навигации.
Вам придется навести курсор на «Уголок серого», а затем на подменю.
Мне бы хотелось, чтобы пункты подменю не перекрывались. Другими словами, я хотел бы, чтобы элемент подменю закрывался при наведении курсора на следующее подменю.

• 
  
  
  
  
  
  
  .dropdown-menu {
  display: none;
  position: absolute;
  background-color: #3B9C9C;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 9999;
  }
  
  .dropdown-menu a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  /*text-align: left;*/
  }
  
  .dropend .dropdown-toggle{
  color: black;
  margin-left: 5px;
  }
  
  .dropdown-item:hover{
  background-color: black;
  color: black;
  }
  
  .dropdown .dropdown-menu{
  display: none;
  }
  .dropdown:hover > .dropdown-menu, .dropend:hover > .dropdown-menu{
  display: block;
  margin-top: .125em;
  margin-left: .125em;
  }
  
  @media screen and (min-width:992px) {
  .dropend:hover > .dropdown-menu{
  position: absolute;
  top: 0;
  left: 100%;
  }
  .dropend .dropdown-toggle{
  margin-left: .5em;
  }
  
  }
  
  
  
  
  
  
  
  
  
  
  [url=javascript:void(0)]Events[/url]
  
  2024 Parade
  River Parade
• [url=javascript:void(0)]Greys Corner[/url]
  
  Health
  
  Item1
• Item2
• Item3

Prepared

• Emergency
• Prepared

Ready

• Ready1
• Ready2

[*]
[url=javascript:void(0)]Store[/url]

Apparel1
Apparel2







CSS: This CSS is what I use for the working part of my navigation bar.

body {
background-color:white;

}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #045D5D; /*dark teal*/
}

li {
float: left;
background-size: 30px;
}

li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

li a:hover, .dropdown:hover .dropbtn {
background-color: #307D7E;
}

li.dropdown {
display: inline-block;
}

.dropdown-content {
display: none;
position: fixed;
background-color: #3B9C9C;
/*background-color: #f9f9f9;*/
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 9999;
}

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

.dropdown-content a:hover {background-color: #f1f1f1;}

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

.rightNav {
text-align: right;
}

#search {
padding: 8px;
font-size: 16px;
border: 2px solid #fff;
border-radius: 5px;
}

.btn {
background-color: #ffd700;
color: #000;
border: none;
padding: 10px 12px;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease-in-out;
}

.btn:hover {
background-color: #000;
/* Change the background color on hover */
color: #ffd700;
}

html {
box-sizing: border-box;
}

p {
font-size: 20px;
}

*, *:before, *:after {
box-sizing: inherit;
}

.column {
float: left;
width: 30%;
height: 20%
margin-bottom: 16px;
padding: 0 8px;
}

.card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
margin: 8px;
width: 90%;
}

.about-section {
padding: 50px;
text-align: center;
background-color: #474e5d;
color: white;
}

.container {
padding: 0 16px;
}

.container::after, .row::after {
content: "";
clear: both;
display: table;
}

.title {
color: blue;
}

.button {
border: none;
outline: 0;
display: inline-block;
padding: 8px;
color: white;
background-color: #000;
text-align: center;
cursor: pointer;
width: 100%;
}

.button:hover {
background-color: #555;
}

@media screen and (max-width: 650px) {
.column {
width: 100%;
display: block;
}
}

.text {
background-color: rgba(0, 0, 0, 0.5);
font-size: 40px;
font-weight: bold;
padding: 10px;
}


Подробнее здесь: https://stackoverflow.com/questions/792 ... r-the-item