Как изменить CSS с помощью ': hover'

#html #css #display #mousehover

#HTML #css #отображение #наведение курсора мыши

Вопрос:

HTML-код

 .navbar li {
  color: #B7B7B7;
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  min-width: 70px;
  padding: 22px 16px 18px;
}
.navbar #menumain ul {
  width: 120%;
}
.navbar ul ul {
  display: none;
}

 <div class="navbar">
  <li id="menumain">
    Menu1main
    <ul>
      <a href="/">
        <li>Menu2</li>
      </a>
    </ul>
  </li>
</div>

Как изменить отображение: нет в navbar ul ul для отображения: блок с :hover
Как изменить display: none на navbar ul ul display: block with :hover ?

Ответ №1:

Я предполагаю, что вы просите что-то вроде этого:

 .navbar li:hover ul {
    display: block;
}

Но ваш код неясен. В настоящее время у вас есть .navbar ul ul в вашем селекторе, но у вас нет двух вложенных ul s нигде в вашей разметке.

Ответ №2:

 .navbar li:hover ul {
    display: block;
}

Я думаю, вы имеете в виду это

РЕДАКТИРОВАТЬ: @David Hedlund Ты был быстрее

Ответ №3:

Вы можете попробовать написать :hover с вашим классом div.

 .navbar li:hover ul {
    display: block;
}

Согласно вашему HTML-коду, у вас нет 2 ul вместо 1 li и 1 ul .
В идеале это должно быть ul сначала, а затем li в HTML-коде.

Ответ №4:

Вы делаете неправильно, человек. a> li — плохая практика. вам нужно сделать li> a

 .navbar > li > ul { display: none; }
.navbar > li:hover > ul { display: block; }

 <div class="navbar">
  <li id="menumain">
    Menu1main
    <ul>
      <li><a href="/">item1</a></li>
      <li><a href="/">item2</a></li>
    </ul>
  </li>
</div>

Помните ошибку проверки HTML W3C: элемент a не разрешен как дочерний элемент элемента ul в этом контексте. (Подавление дальнейших ошибок из этого поддерева.)