JSFiddle - React, Tailwind, and code Playground

by varid007

HTML

<ul class="parent">
    <li><a href="#">Menu 1</a>
        <ul class="sub-menu">
            <li><a href="#">Sub Menu 1</a></li>
            <li><a href="#">Sub Menu 2</a></li>
            <li><a href="#">Sub Menu 3</a></li>
        </ul>
    </li>
    <li><a href="#">Menu 2</a></li>
    <li><a href="pc-mode.blogspot.com">Menu 3</a>
        <ul class="sub-menu">
            <li><a href="#">Sub Menu 1</a></li>
        </ul>
    </li>
</ul>

CSS

ul li{
    list-style:none; /*menghilangkan titik(list bullet)*/
}
ul.parent > li{
    padding:0 10px 0 10px;
    display:inline; /*agar menu horisontal(sejajar)*/    
    position:relative; 
}
ul.parent li:hover ul.sub-menu{
    visibility:visible; /* saat mouse di atas menu class .sub-menu akan terlihat*/
}
ul li a{
    text-decoration:none;/*menghilangkan underline di link*/
}
ul.sub-menu{
    position:absolute;
    width:200px; /*mengatur lebar seb-menu*/
    padding-left:0; /*menghilangkan adding sebelah kiri*/
    visibility:hidden; /*menyembunyikan sub-menu*/
}