JSFiddle - React, Tailwind, and code Playground

HTML

<div class="menu">
    <ul>
        <li><a class="menu-item-1" href='#'>Return False</a>
        <ul class="sub-item-1">
                <li><a href="#">A</a></li>
                <li><a href="#">B</a></li>
                <li><a href="#">C</a></li>
            </ul>
        </li>
        <li><a class="menu-item-2" href='#'>Stop Propagation</a>
                <ul class="sub-item-2">
                <li><a href="#">A</a></li>
                <li><a href="#">B</a></li>
                <li><a href="#">C</a></li>
            </ul>
        </li>
        <li>
            <a class="menu-item-3" href='#'>Prevent Default</a>
            <ul class="sub-item-3">
                <li><a href="#">A</a></li>
                <li><a href="#">B</a></li>
                <li><a href="#">C</a></li>
            </ul>
        </li>
            
    </ul>
</div>

CSS

.menu ul {
    background: none repeat scroll 0 0 #333333;
    height: 2em;
    list-style: none outside none;
    padding : 0;
}
.menu li {
    float: left;
    padding:0;
    border-right: 1px solid #cccccc;
}

.menu label {
    line-height: 2em;
    color: #CCCCCC;
    text-align: center;
    text-decoration: none;
    padding: 1em;
}

.menu input {
    width:3em;
}
.menu li a:hover {
    background-color: #CCCCC4;
    color: #333333;
    cursor: pointer;
}


.menu li a {
    line-height: 2em;
    color: #CCCCCC;
    padding: 1em 1.5em;
    text-align: center;
    text-decoration: none;
}
.menu:after{
    clear:both;
}


/*submenu*/
.menu li ul{
    background:none;
    display:none;
    height:auto;
    padding:0;
    position:absolute;
    z-index:2;
}

.menu li ul li{
    background:#333333;
  border: none;
}
/*
.menu li:hover ul{
    display:block;
}
*/
.menu li li {
    display:block;
    height:2em;
    float:none;
    margin:0;
    padding:0;
}
.menu li] li a{
    background:none;
    line-height: 2em;
    color: #CCCCCC;
    padding: 0 1.5em;
}
.menu li ul a{
    display:block;
    height:2em;
    font-style:normal;
    margin:0;
    padding: 0;
    text-align:left;
}
.menu li ul a:hover, .menu li ul li:hover a{

    background-color: #CCCCC4;
    color: #333333;
    border:0;
    text-decoration:none;
}

JavaScript

$(document).ready(function() {
    //click a menu item to show
    $('.menu-item-3').click(function(e) {

        if ( $(".sub-item-3").is(":visible")) {
            $(".sub-item-3").hide();
        } else {
               $(".sub-item-3").show();
        }
        //e.stopPropagation();
        e.preventDefault();
        //return false;
        

    });
    
        $('.menu-item-2').click(function(e) {

        if ( $(".sub-item-2").is(":visible")) {
            $(".sub-item-2").hide();
        } else {
               $(".sub-item-2").show();
        }
        e.stopPropagation();
        //e.preventDefault();
        //return false;
        

    });
    
        $('.menu-item-1').click(function(e) {

        if ( $(".sub-item-1").is(":visible")) {
            $(".sub-item-1").hide();
        } else {
               $(".sub-item-1").show();
        }
        //e.stopPropagation();
//        e.preventDefault();
        return false;
        

    });
    
    $(".sub-item-3").click(function() {
        alert('yo');
    });
    
    
    
    //click anywhere else to hide
    $(document).click(function() {
        if ( $("[class^=sub-item]").is(":visible")) {
            $("[class^=sub-item]").hide();
        }
    });
    

});