Почему :hover работает не для всех блоков?

Question

Есть такой код для HTML:

    <ul id='menu'>
        <li><a href="#" class='menu_item'>Медалисты</a>
            <ul id='submenu_pupils'>
                <li><a href="#" class='submenu_item'>Золотые</a></li>
                <li><a href="#" class='submenu_item'>Серебряные</a></li>                        
            </ul>
        </li>

И такой код для CSS:

#menu li{
    list-style: none;
    position: relative;
}
#menu a{
    text-decoration: none;
}
#menu{
    display:flex;
}
.menu_item{
    color:honeydew;
    display: block;
    width:255px;
    margin: 120px 0px 0px 0px;
    padding: 20px;
    text-align: center;
    background-color: cornflowerblue;
}
#submenu_pupils{
    position: absolute;
    top:170px;
    left:0px;
    background-color: saddlebrown;
    width: 255px;
    display:none;
}
.menu_item:hover #submenu_pupils{
    display: block;
}
.menu_item:hover{
    background-color: orchid;
}

При наведении мышки блок 'menu_item' меняет цвет, но блок 'submenu_pupils' не появляется. Почему? Извините за, возможно, глупый вопрос. И заранее спасибо

Answer 1

Вы забыли указать селектор +:

#menu li {
  list-style: none;
  position: relative;
}

#menu a {
  text-decoration: none;
}

#menu {
  display: flex;
}

.menu_item {
  color: honeydew;
  display: block;
  width: 255px;
  margin: 120px 0px 0px 0px;
  padding: 20px;
  text-align: center;
  background-color: cornflowerblue;
}

#submenu_pupils {
  position: absolute;
  top: 170px;
  left: 0px;
  background-color: saddlebrown;
  width: 255px;
  display: none;
}

.menu_item:hover + #submenu_pupils {
  display: block;
}

.menu_item:hover {
  background-color: orchid;
}

<ul id='menu'>
  <li><a href="#" class='menu_item'>Медалисты</a>
    <ul id='submenu_pupils'>
      <li><a href="#" class='submenu_item'>Золотые</a></li>
      <li><a href="#" class='submenu_item'>Серебряные</a></li>
    </ul>
  </li>
</ul>

БЛОГ НА HUSL

Почему :hover работает не для всех блоков?

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