CSS Submenu Basic

호버시, 서브메뉴 펼치기(Display:none)

HTML

  <ul class="sandbox_menu">

    <li><a href="">메뉴1</a>

      <ul class="sandbox_submenu">

        <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>

      <ul class="sandbox_submenu">

        <li><a href="">서브1</a></li>

        <li><a href="">서브2</a></li>

        <li><a href="">서브3</a></li>

      </ul>

    </li>

    <li><a href="">메뉴3</a>

      <ul class="sandbox_submenu">

        <li><a href="">서브1</a></li>

        <li><a href="">서브2</a></li>

        <li><a href="">서브3</a></li>

      </ul>

    </li>

    <li><a href="">메뉴4</a>

      <ul class="sandbox_submenu">

        <li><a href="">서브1</a></li>

        <li><a href="">서브2</a></li>

        <li><a href="">서브3</a></li>

      </ul>

    </li>

  </ul>

 

 

CSS

.sandbox_menu{

    display: flex;

}

.sandbox_menu > li > a{

    display: block;

    padding: 10px;

    border: 1px solid black;

}

.sandbox_submenu{

    display: none;

}

.sandbox_submenu > li > a{

    display: block;

    padding: 10px;

    border: 1px solid black;

}

.sandbox_menu > li > a:hover{

    color: blue;

}

.sandbox_menu > li:hover > ul {

    display: flex;

    flex-direction: column;

}

.sandbox_submenu > li > a:hover{

    color: blue;

}

 

 

ON BROWSER

 

 

 

 

호버시, 서브메뉴 펼치기(Height:0)

HTML

  <ul class="sandbox_menu">

    <li><a href="">메뉴1</a>

      <ul class="sandbox_submenu">

        <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>

      <ul class="sandbox_submenu">

        <li><a href="">서브1</a></li>

        <li><a href="">서브2</a></li>

        <li><a href="">서브3</a></li>

      </ul>

    </li>

    <li><a href="">메뉴3</a>

      <ul class="sandbox_submenu">

        <li><a href="">서브1</a></li>

        <li><a href="">서브2</a></li>

        <li><a href="">서브3</a></li>

      </ul>

    </li>

    <li><a href="">메뉴4</a>

      <ul class="sandbox_submenu">

        <li><a href="">서브1</a></li>

        <li><a href="">서브2</a></li>

        <li><a href="">서브3</a></li>

      </ul>

    </li>

  </ul>

 

 

CSS

.sandbox_menu{

    display: flex;

}

.sandbox_menu > li > a{

    display: block;

    padding: 10px;

    border: 1px solid black;

}

.sandbox_submenu{

    display: block;

    height: 0px;

    overflow: hidden;

}

.sandbox_submenu > li > a{

    display: block;

    padding: 10px;

    border: 1px solid black;

}

.sandbox_menu > li:hover > a{

    color: blue;

}

.sandbox_menu > li:hover > .sandbox_submenu {

    display: flex;

    flex-direction: column;

    height: 100%;

    overflow: none;

}

.sandbox_submenu > li > a:hover{

    color: blue;

}

 

 

ON BROWSER

 

 

 

 

간격 있는 서브메뉴

HTML

  <ul class="sandbox_menu">

    <li><a href="">메뉴1</a>

      <ul class="sandbox_submenu">

        <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>

      <ul class="sandbox_submenu">

        <li><a href="">서브1</a></li>

        <li><a href="">서브2</a></li>

        <li><a href="">서브3</a></li>

      </ul>

    </li>

    <li><a href="">메뉴3</a>

      <ul class="sandbox_submenu">

        <li><a href="">서브1</a></li>

        <li><a href="">서브2</a></li>

        <li><a href="">서브3</a></li>

      </ul>

    </li>

    <li><a href="">메뉴4</a>

      <ul class="sandbox_submenu">

        <li><a href="">서브1</a></li>

        <li><a href="">서브2</a></li>

        <li><a href="">서브3</a></li>

      </ul>

 

CSS

.sandbox_menu{

    display: flex;

}

.sandbox_menu > li > a{

    display: block;

    padding: 10px;

    border: 1px solid black;

}

.sandbox_submenu{

    display: block;

    height: 0px;

    overflow: hidden;

    margin-top: 50px;

}

.sandbox_submenu > li > a{

    display: block;

    padding: 10px;

    border: 1px solid black;

}

.sandbox_menu > li:hover > a{

    color: blue;

}

.sandbox_menu > li:hover > .sandbox_submenu {

    display: flex;

    flex-direction: column;

    height: 100%;

    overflow: none;

}

.sandbox_submenu > li > a:hover{

    color: blue;

}

 

 

ON BROWSER