[CSS] float를 이용한 풀다운 메뉴

float를 이용한 풀다운 메뉴

 

<nav class="top-menu">

  <ul>

    <li>

      <a href="#">야옹이1</a>

        <ul>

          <li>

            <a href="#">방울이 1</a>

              <ul>

                 <li><a href="#">방울이 1</a></li>

                 <li><a href="#">방울이 2</a></li>

                 <li><a href="#">방울이 3</a></li>

              </ul>

          </li>

          <li><a href="#">방울이 2</a></li>

          <li><a href="#">방울이 3</a></li>

          <li><a href="#">방울이 4</a></li>

        </ul>

    </li>

    <li>

      <a href="#">야옹이2</a>

         <ul>

          <li><a href="#">방울이</a></li>

          <li><a href="#">방울이</a></li>

          <li><a href="#">방울이</a></li>

          <li><a href="#">방울이</a></li>

        </ul>

    </li>

    <li><a href="#">야옹이3</a></li>

    <li><a href="#">야옹이4</a></li>

  </ul>

</nav>

-------------------보이지 않는 벽----------------<br>

하하하하

 

 

/* 노말라이즈 */

ul, li {

    margin:0;

    padding:0;

    list-style:none;

}

 

a {

    color:inherit;

    text-decoration:none;

}

/* 노말라이즈 */

 

/* 메뉴박스 */

nav.top-menu {

    text-align:center;

}

 

 

/* 메뉴아이템 */

nav.top-menu li {

    background-color:#dfdfdf;

    position:relative;

}

 

/* 마우스가 올려진 메뉴 아이템 */

nav.top-menu li:hover {

    background-color:black;

}

 

/* 마우스가 올려진 메뉴아이템의 텍스트 */

nav.top-menu li:hover > a {

    color:white;

}

 

/* 2차메뉴를 포함한 모든 서브메뉴 */

nav.top-menu ul ul {

    display:none;

    position:absolute;

    top:100%;

    left:0;

}

 

/* 3차메뉴를 이상의 모든 서브메뉴 */

nav.top-menu ul ul ul {

    top:0;

    left:100%;

}

 

/* 활성화된 서브메뉴 */

nav.top-menu li:hover > ul {

    display:block;

}

 

/* 1차 메뉴 */

nav.top-menu > ul {

    display:inline-block;

    padding:0 10px;

    background-color:#dfdfdf;

    border-radius:5px;

}

 

/* 1차 메뉴 아이템 */

nav.top-menu > ul > li {

    display:block;

    float:left;

}

 

/* 1차 메뉴에 막내를 추가한다. */

nav.top-menu > ul::after {

    content:"";

    display:block;

    clear:both;

}

 

/* 메뉴아이템 텍스트 */

nav.top-menu a {

    padding:10px;

    display:block;

    white-space:nowrap;

}