JSFiddle - React, Tailwind, and code Playground

by mflodin

HTML

<link rel="stylesheet" href="http://www.criticalcarenews.com/inc/globalStyleCCN.css">
<link rel="stylesheet" href="http://www.criticalcarenews.com/inc/globalPositionCCN.css">
<div id="divLeftContent">
    <div id="divNavBar">
        <ul class="sideMenu">
            <li id="home">
                <a id="ctl00_LeftSideBar_NavigationBar_navBarControl_hlHome" class="navSelectable" public="true" itemName="home" href="#">
                    ARTICLES IN LATEST ISSUE
                </a>
            </li>
            <li id="article" class="selected">
                <a id="ctl00_LeftSideBar_NavigationBar_navBarControl_hlArticle" class="navSelectable" public="true" itemName="article" href="#">
                    SEARCH TOPICS
                </a>
                <ul class="subMenu">
                    <li id="li1">
                        <a id="ctl00_LeftSideBar_NavigationBar_navBarControl_HyperLink1" class="navSelectable" href="#">
                            TOPIC GSMKSMDLK DFKMLKAFl KMFLALKMAF  
                        </a>
                    </li>
                    <li id="li2">
                        <a id="ctl00_LeftSideBar_NavigationBar_navBarControl_HyperLink2" class="navSelectable" href="#">
                            TOPIC POKGK KMFLALKMAF KMFLALKMAF DFKMLKAFl   
                        </a>
                    </li>
                    <li id="li3">
                        <a id="ctl00_LeftSideBar_NavigationBar_navBarControl_HyperLink3" class="navSelectable" href="#">
                            TOPIC SGSDG  
                        </a>
                    </li>
                    <li id="li4">
                        <a id="ctl00_LeftSideBar_NavigationBar_navBarControl_HyperLink4" class="navSelectable" href="#">
                            TOPIC ADSGHJ DFKMLKAFl KMFLALKMAF  
                        </a>
                    </li>
                </ul>
            </li>
            <li id="symposium">
                <a...

CSS

ul.sideMenu {
    width:100%;   
    z-index:20;
    list-style: none;
        padding:0px;
    margin:0px;
}

ul.sideMenu li.selected {
    border: 1px solid #5B9BC9;
}

ul.sideMenu li{
    margin-bottom: 2px;
    padding: 0px;
    list-style-image: none;
    #background-color:white;
}
ul.sideMenu li.opened {
    border: 1px solid #5B9BC9;
    background-color: #5B9BC9;
    color: #fff;
}

ul.sideMenu li.opened a, ul.sideMenu li ul li a {
    color:#fff;
}



ul.sideMenu li ul {
    list-style: none;
    left: 163px;
    top: 0px;
    border: solid 1px #5B9BC9;
    background-color: #5B9BC9;
    display: none;   
    position:absolute;
    white-space:nowrap;
    z-index: 15;
    float:left;
        padding:0px;
    margin:0px;
}

ul.sideMenu li a{
    font-size: 10px;
    color:#808285;
    margin: 1px 5px 1px 5px;
}

ul.sideMenu li ul li a {
    color:#000;
}

JavaScript

//<![CDATA[
                $(document).ready(function() {
                    var timeoutID = null;

                    // function for hiding the menu. useful if we want to add a callback to the hide() function
                    var hideMenu = function(element) {
                        element.hide(250, function() {
                            element.parent().removeClass('opened');
                        });
                    };

                    var showMenu = function(clickedElement) {
                        clearTimeout(timeoutID);
                    
                        //get the position of the clicked menu element
                        var pos = clickedElement.position();
                        var width = clickedElement.outerWidth(); // includes padding and stuff
                        
                        //show the menu to the right of the clicked element
                        var subMenu = clickedElement.children('ul').first();
                        subMenu.css({
                            'left': (width - 1) + 'px',
                            'top': pos.top + 'px'
                        });
                        
                            // This hides any already open sub menu except if it's the same we're trying to open
                        $('ul.subMenu').not(subMenu).hide()
                            .parent().removeClass('opened');
                        
                        clickedElement.addClass('opened'); //allows for styling the clicked list item
                        subMenu.show(250);
                        timeoutID = setTimeout(function() {
                            hideMenu(subMenu);
                        }, 3000);
                    };

                    // Keep the sub menu open if the user hovers over it
                    $('ul.subMenu').mouseover(function() {
                        clearTimeout(timeoutID);
                    }).mouseleave(function() {
                      ...