JSFiddle - React, Tailwind, and code Playground

by learningforever

HTML

<div id="top_menu">
   <p class="menu_line"></p>
      <ul>
      <li class="menu"><img src="http://placehold.it/100x20"></a>
        <ul class="sub_menu">
            <li>서브메뉴1-1</li>
                <ul class="sub_sub_menu">
                    <li>서브메뉴1-1-1</li>
                     <li>서브메뉴1-1-2</li>
                    <li>서브메뉴1-1-3</li>
                     <li>서브메뉴1-1-4</li>
                    <li>서브메뉴1-1-4</li>
                     <li>서브메뉴1-1-6</li>
                </ul>
             <li>서브메뉴1-2</li>
            <ul class="sub_sub_menu">
                    <li>서브메뉴1-2-1</li>
                     <li>서브메뉴1-2-2</li>
                    <li>서브메뉴1-2-3</li>
                     <li>서브메뉴1-2-4</li>
                    <li>서브메뉴1-2-5</li>
                     <li>서브메뉴1-2-6</li>
                </ul>
            </ul>
        </li>
          <li class="menu"><a href="/"> <img src="http://placehold.it/100x20"></a>
          <ul class="sub_menu">
            <li>서브메뉴2-1</li>
                <li>서브메뉴2-2</li>
            </ul>
          </li>
          <li class="menu"><a href="/"> <img src="http://placehold.it/100x20"></a>
          <ul class="sub_menu">
            <li>서브메뉴3-1</li>
                <li>서브메뉴3-2</li>
            </ul>
          </li>
          <li class="menu"><a href="/"> <img src="http://placehold.it/100x20"></a>
          <ul class="sub_menu">
            <li>서브메뉴4-1</li>
                <li>서브메뉴4-2</li>
            </ul>
          </li>
          <li class="menu"><a href="/"> <img src="http://placehold.it/100x20"></a>
          <ul class="sub_menu">
            <li>서브메뉴5-1</li>
                <li>서브메뉴5-2</li>
            </ul>
          </li>
          <li class="menu"><a href="/"> <img src="http://placehold.it/100x20"></a>
          <ul class="sub_menu">
            <li>서브메뉴6-1</li>
                <li>서브메뉴6-2</li>
            </ul>
          </li>
          <li class="menu"><a href="/"> <img src="http://placehold.it/100x20"></a>
          <ul...

CSS

*{margin:0; padding:0;}

#top_menu {float:left;padding:0 ; width:1024px}
ul { list-style:none; margin:0; padding:0; }  
li { margin: 0 0 0 0; padding: 0 0 0 0; border : 0; float: left; }
.menu_line {margin:0;height:1px; background:#db1da3;}


.sub_menu{position:absolute; width:150px;}

.sub_menu{display:none;}
.menu:hover ul{display:block;}