Наведите курсор мыши на тег ul li, но курсор не работает

Question

У меня есть такой код, я хочу, чтобы при наведении курсора мыши на <ul> <li> тег падал <ul> тег:

body {
  background: hotpink;
}

.menu>ul>li {
  display: inline-block;
  position: relative;
}

.menu>ul>li>a {
  display: inline-block;
  text-decoration: none;
  font-variant: small-caps;
  font-size: larger;
  color: white;
  padding: 0 10px;
  line-height: 40px;
}

.menu>li>a:hover {
  color: yellow;
}

.menu>ul ul {
  position: absolute;
  display: none;
  padding: 0px;
  margin: 0px;
  list-style: none;
  border-radius: 3px;
  width: 200px;
  background-color: lightgray;
  box-shadow: 0 0 2px green;
}

.menu>ul li:hover>ul {
  display: block;
}

.menu>ul li:hover>ul {
  display: block;
}

<nav class="menu">
  <ul>
    <li><a href="home.html" target="self">Trang chủ</a></li>
    <li><a href="gioithieu.html" target="noidung">Giới thiệu</a></li>
    <ul>
      <li><a href="gioithieuchung.html">Giới thiệu chung</a></li>
      <li><a href="cocautochuc.html">Cơ cấu tổ chức</a></li>
    </ul>
    <li><a href="tintuc.html" target="noidung">Tin tức</a></li>
    <li><a href="lienhe.html" target="noidung">Liên hệ</a></li>
    <li><a href="hoidap.html" target="noidung">Hỏi đáp</a></li>
  </ul>
</nav>

Я хочу, когда я перейду в gioithieu. html, он покажет ul ниже. У меня было это, но это не работает. Пожалуйста, помогите мне. Заранее спасибо.

Answer 1

Измените HTML на это:

<li><a href="gioithieu.html" target="noidung">Giới thiệu</a>
   <ul>
      <li><a href="gioithieuchung.html">Giới thiệu chung</a></li>
      <li><a href="cocautochuc.html">Cơ cấu tổ chức</a></li>
   </ul>
</li>

Ваш селектор подразумевает, что ul (выпадающее меню) является прямым потомком li из-за использования>, но вместо этого это был брат, поэтому это не сработает из-за этого. С этим фрагментом ul теперь будет его потомком.

Кроме того, HTML недопустимо помещать ul в ul, и таким образом это допустимо.