글씨위에 커서를 올리면 하위 리스트가 나오도록 구현하기

<nav class="menu-1">
  <ul>
    <li>
      <a href="#">동물</a>

      <ul>
        <li><a href="#">포유류</a></li>
        <li><a href="#">조류</a></li>
      </ul>
    </li>

    <li>
      <a href="#">식물</a>

      <ul>
        <li><a href="#">과일</a></li>
        <li><a href="#">야채</a></li>
      </ul>
    </li>

    <li>
      <a href="#">광물</a>

      <ul>
        <li><a href="#">금속</a></li>
        <li><a href="#">비금속</a></li>
      </ul>
    </li>
  </ul>
</nav>




/css



.menu-1 > ul ul {
  display:none;
}

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