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

var hide;
$(".toggle").click(function(){
    var active_span = $(this).children('a:first').children('span');   
    var active_ul = $(this).children('ul');
    
    $(active_span).toggleClass('fc-state-active');
    $("span.fc-state-active").not(active_span).removeClass('fc-state-active');
    $(active_ul).toggle();
    $("#nav ul:visible").not(active_ul).hide();
    hide = false;   
}); 
$(document).click(function(){
    if(hide){
        $('#nav ul:visible').hide();
        $('span.fc-state-active').removeClass('fc-state-active');
    }
    hide = true;
});