выпадающее меню отображается вместе с основным,. как исправить?

Question

При отображении на странице выпадающее меню отображается вместе с основным. Как это исправить?

.header_menu {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 50px;
  align-self: start;
}
.header_menu li {
  margin-top: 20px;
}
.header_menu li a {
  font-size: 20px;
  font-weight: 700;
  line-height: 27px;
  color: inherit;
  text-transform: lowercase;
}
.header_menu_drop {
 font-size: 16px;
 display: none;
 position: relative;
 background-color: №7AA3B9;
}

.header_menu_drop a {
  color: №102A41;
  display: block;
  padding: 12px 16px;
  text-decoration: none;
}
    
.header_menu_drop ul{
    position: absolute;
    left: 0;
    top: 100%;
    display: none;
    padding: 0;
}

.header_menu_drop ul li a:hover{
    display: block;
      /*    display: none;*/
} `.header_menu {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 50px;
  align-self: start;
}
.header_menu li {
  margin-top: 20px;
}
.header_menu li a {
  font-size: 20px;
  font-weight: 700;
  line-height: 27px;
  color: inherit;
  text-transform: lowercase;
}
.header_menu_drop {
 font-size: 16px;
 display: none;
 position: relative;
 background-color: №7AA3B9;
}

.header_menu_drop a {
  color: №102A41;
  display: block;
  padding: 12px 16px;
  text-decoration: none;
}
    
.header_menu_drop ul{
    position: absolute;
    left: 0;
    top: 100%;
    display: none;
    padding: 0;
}

.header_menu_drop ul li a:hover{
    display: block;
      /*    display: none;*/
}

 <nav>
            <ul class="header_menu">
                <li><a href="">главная</a></li>
                <li><a href="">места отдыха</a>
                  <ul>
                     <li><a href="">места отдыха</a></li>
                     <li><a href="">места отдыха</a></li>
                     <li><a href="">места отдыха</a></li>
                     <li><a href="">места отдыха</a></li>
                  </ul>
                </li>
                <li><a href="">цены</a></li>
                <li><a href="">ОТЗЫВЫ</a></li>
                <li><a href="">контакты</a></li>
                <div class="header_info">
<div class="header_info-phone"><a href="tel:8(800)200−19−17">8(800)200−19−17</a></div>
                    <div class="header_info-mail"><a href="mailto:[email protected]">[email protected]</a></div>
                </div>
            </ul>
                </nav>

Answer 1

.header_menu {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 50px;
  align-self: start;
}
.header_menu li {margin-top: 20px;}
.header_menu li a {
  font-size: 20px;
  font-weight: 700;
  line-height: 27px;
  color: inherit;
  text-transform: lowercase;
}
.header_menu_drop {
 font-size: 16px;
 display: none;
 position: relative;
 background-color: #7AA3B9;
}

.header_menu_drop a {
  color: #102A41;
  display: block;
  padding: 12px 16px;
  text-decoration: none;
}
    
.header_menu_drop ul{
    position: absolute;
    left: 0;
    top: 100%;
    display: none;
    padding: 0;
}

.header_menu_drop ul li a:hover{display: block;}

li:not(:hover) > ul{display: none;} /*!!!!!!*/
.header_menu{
position: relative;
top: 0;
}
li{height: 2em;}

<nav>
            <ul class="header_menu">
                <li><a href="">главная</a></li>
                <li><a href="">места отдыха</a>
                  <ul>
                     <li><a href="">места отдыха</a></li>
                     <li><a href="">места отдыха</a></li>
                     <li><a href="">места отдыха</a></li>
                     <li><a href="">места отдыха</a></li>
                  </ul>
                </li>
                <li><a href="">цены</a></li>
                <li><a href="">ОТЗЫВЫ</a></li>
                <li><a href="">контакты</a></li>
                <div class="header_info">
<div class="header_info-phone"><a href="tel:8(800)200−19−17">8(800)200−19−17</a></div>
                    <div class="header_info-mail"><a href="mailto:[email protected]">[email protected]</a></div>
                </div>
            </ul>
                </nav>

ну как то так...

БЛОГ НА HUSL

выпадающее меню отображается вместе с основным,. как исправить?

Ответы (1 шт):