JSFiddle - React, Tailwind, and code Playground

by azhari

HTML

<ul id="menu">
 <li><a href="#">Home</a></li>
 <li><a href="#">Berita</a>
     <ul>
          <li><a href="#">Mancanegara</a></li>
          <li><a href="#">Nasional</a></li>
          <li><a href="#">Olahraga</a></li>
     </ul>
 </li>
 <li><a href="#">Pengumuman</a></li>
 <li><a href="#">Buku Tamu</a></li>
 <li><a href="#">Tentang Kami</a></li>
</ul>

CSS

#menu{
   	padding: 0;
   }
 
   #menu li{
   	float: left;
   	background: #4679BD;
   	border: 1px solid #939C8A;
   	list-style-type: none;;
   }
#menu li ul{
   	display: none;
   }
#menu li a{
    text-decoration: none;
    display: block; 
    padding: 10px;
    color: #edffec;
    font-family: tahoma;
   }
 #menu li a:hover{
   	background: black;
   }
#menu li:hover ul{
   	display: block;
   	position: absolute;
   }
#menu li:hover li{
   	float: none;
   }
 
   #menu li ul{
   	padding: 0px;
   }