JSFiddle - React, Tailwind, and code Playground

by Poyu Chen

HTML

<ul class="navlist">
    <li>
        <a href="http://mozilla.com.tw">index</a>
        <ul class="level_2">
            <li>
                abc
            </li>
            <li>
                cde
            </li>
        </ul>
    </li>
    <li>
       <a href="http://mozilla.com.tw/about/">about</a>
       <ul class="level_2">
            <li>
                fgh
            </li>
            <li>
                ijk
            </li>
        </ul>
    </li>         
</ul>

CSS

.navlist{
  font-size:16px;
}
.navlist:after{
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

.navlist>li, .level_2>li{
 disply:inline-block;        
 float:left;
 width:80px;
 height:20px;
 border:1px solid #000;
 text-align:center;
 position:relative;
 color:#000;
}

.level_2{
 position:absolute;
 top:-1000px;
 left:-1px;
}

.navlist>li:hover .level_2{
 top:20px;
}

.navlist>li:hover, .level_2>li:hover{
 background:#f00;
 color:#fff;
}