JSFiddle - React, Tailwind, and code Playground

by hannes

HTML

<ul id="toggle"><li>
<a href="#">Menu</a>
<ul class="dropdown-menu" role="menu">
<li><a href="http://www.neti.ee">2017</a></li>
<li><a href="http://www.neti.ee">2012</a></li>
<li><a href="http://www.neti.ee">2003</a></li>
</ul>
</li>
<li><a href="http://www.neti.ee">Contact</a></li>
</ul>

CSS

#toggle{
list-style-type: none;
margin: 0;
padding:0;
text-align:left;
line-height:2.5em;
font-size: 1.0em;
text-transform:uppercase;
font-style:normal;
}

#toggle li{
background-color:#111;
padding:0;
margin:0;
vertical-align:top;
float:left;
position:relative;
}

#toggle li a {
margin:0 1px 0 0;
padding:8px 17px;
color:#fff;
font-weight:300;
text-decoration:none;
}

#toggle li ul{
left:0;
position:absolute;
display:none;
}

JavaScript

$('#toggle li').on('click', function () {
     $(this).find('ul').slideToggle();
 });