CSS / CSS로 드롭다운(Dropdown) 메뉴 만들기

CSS만으로 만든 드롭다운 메뉴입니다. Ipsum, Dolor에 마우스를 올리면 하위 메뉴가 나옵니다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>CSS Tips | Dropdown Menu</title>
    <style>
      .dropdown > ul > li {
        display: inline-block;
        position: relative;
      }
      .dropdown > ul > li > ul {
        position: absolute;
        list-style-type: none;
        padding-left: 0px;
        display: none;
      }
      .dropdown > ul > li:hover > ul {
        display: block;
      }
    </style>
  </head>
  <body>
    <div class="dropdown">
      <ul>
        <li>
          <a href="#">Lorem</a>
        </li>
        <li>
          <a href="#">Ipsum</a>
          <ul>
            <li><a href="#">Consectetur</a></li>
            <li><a href="#">Amet</a></li>
          </ul>
        </li>
        <li>
          <a href="#">Dolor</a>
          <ul>
            <li><a href="#">Adipiscing</a></li>
            <li><a href="#">Elit</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </body>
</html>

CSS 강좌