JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<div style="width:170px;">
    <ol class="top-nav">
        <li>View Options
            <div class="subl" style="display: none;">
                <a href="javascript: void(0);" onclick="...">More Details</a>
                <br /><hr />
                <a href="javascript: void(0);" onclick="...">More Stuff</a>
            </div>
        </li>
    </ol>
</div>

CSS

ol.top-nav {
    list-style: none;
    margin: 0px auto;
    width: 100%;
    padding: 0px;
    text-align: center;
    float:left
}
ol.top-nav li {
    float:left;
    width: 100%;
    cursor:pointer;
}
ol.top-nav li .subl {
    width: 155px !important;
    border: 1px solid lightgray !important;
    padding: 5px !important;
    position:absolute;
    height:auto !important;
    text-align:left;
    z-index: 9;
}
ol.top-nav li .subl a {
    color:#360;
    padding: 5px;
    float: left;
    width:145px;
    text-decoration:none;
}
ol.top-nav li .subl a:hover {
    background-color:#808080;
    text-decoration:underline;
    color:white;
}
ol.top-nav li .subl hr {
    width:100%;
    float:left;
}

JavaScript

// Generic function
function loopTest(exit) {
   var p=[2,3,4,5,6,7,8,9]
    $.each(p, function (i, o) {        
        if (exit && o == 4) {
            return false;
        }
        alert(o);
    });
}


loopTest(true);