JSFiddle - React, Tailwind, and code Playground

HTML

<head>
<link rel='stylesheet' type='text/css' href='http://arshaw.com/js/fullcalendar-1.5.1/fullcalendar/fullcalendar.css' />    
</head>

<ul id="nav">
        <li class="toggle">
            <a href="#">
                <span class="fc-button fc-state-default fc-corner-left">
                    <span class="fc-button-inner">
                        <span class="fc-button-content overview_button">Overview</span>
                        <span class="fc-button-effect">
                            <span></span>
                        </span>
                    </span>
                </span>
            </a>
            <ul style="display:none">
                <li><a href="#YTD">This year</a></li>
                <li><a href="#3">Last 3 months</a></li>
                <li><a href="#6">Last 6 months</a></li>
                <li><a href="#12">Last 12 months</a></li>
                <li><a href="#all">All data</a></li>
            </ul>
        </li>
        <li class="toggle">
            <a href="#">
                <span class="fc-button fc-state-default">
                    <span class="fc-button-inner">
                        <span class="fc-button-content perpet_button">Per X</span>
                        <span class="fc-button-effect">
                            <span></span>
                        </span>
                    </span>
                </span>
            </a>
            <ul style="display:none">
                <li><a href="#YTD">This year</a></li>
                <li><a href="#3">Last 3 months</a></li>
                <li><a href="#6">Last 6 months</a></li>
                <li><a href="#12">Last 12 months</a></li>
                <li><a href="#all">All data</a></li>
        </ul>
        </li>
        <li class="toggle">
            <a href="#">
                <span class="fc-button fc-state-default">
                    <span class="fc-button-inner">
                        <span class="fc-button-content percat_button">Per Y</span>
 ...

CSS

#nav, #nav ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

#nav a {
    display: block;
    font-weight: normal;
    text-decoration: none;
}

#nav li ul li a {
    display: block;
    background:#f7f7f7;
    padding: 8px 0 8px 20px;
    font-weight: normal;
    color: #3b3b3b;
    width: 10em;
}

#nav li ul li a:hover {
    color: #000;
    background-color: #dadada;
}

#nav li {
    float: left;
}

#nav li ul {
    position: absolute;
    width: 11.55em;
    left: auto;
    border-left: solid 1px #CCC;
    border-right: solid 1px #CCC;
    border-bottom: solid 1px #CCC;
    z-index: 500;
    
}

JavaScript

$(".toggle").click(function(){
    $('#nav ul:visible').hide();
    $('span.fc-state-active').removeClass('fc-state-active');
    $(this).children('a:first').children('span').addClass('fc-state-active');
    $(this).children('ul').show();
}).focusout(function(){
    $('#nav ul:visible').hide();
    $('span.fc-state-active').removeClass('fc-state-active');
});