JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="menu">
    <li><a href="/">Home</a></li>

    <li>
        <a href="">Categories</a>
        <ul>
            <li>
                <a href="">CSS</a>
                <ul>
                    <li><a href="">Item 11</a></li>

                    <li><a href="">Item 12</a></li>
                    <li><a href="">Item 13</a></li>
                    <li><a href="">Item 14</a></li>
                </ul>                
            </li>
            <li>
                <a href="">Graphic design</a>

                <ul>
                    <li><a href="">Item 21</a></li>
                    <li><a href="">Item 22</a></li>
                    <li><a href="">Item 23</a></li>
                    <li><a href="">Item 24</a></li>
                </ul>                
            </li>

            <li>
                <a href="">Development tools</a>
                <ul>
                    <li><a href="">Item 31</a></li>
                    <li><a href="">Item 32</a></li>
                    <li><a href="">Item 33</a></li>
                    <li><a href="">Item 34</a></li>

                </ul>                
            </li>
            <li>
                <a href="">Web design</a>                
                <ul>
                    <li><a href="">Item 41</a></li>
                    <li><a href="">Item 42</a></li>
                    <li><a href="">Item 43</a></li>

                    <li><a href="">Item 44</a></li>
                </ul>    
            </li>
        </ul>
    </li>
    <li>
        <a href="">Work</a>
        <ul>

            <li>
                <a href="">Work 1</a>
                <ul>
                    <li>
                        <a href="">Work 11</a>        
                        <ul>
                            <li><a href="">Work 111</a></li>
                            <li><a href="">Work 112</a></li>

                            <li><a href="">Work 113</a></li>
                        </ul>                            
...

CSS

#menu, #menu ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }
    
    #menu {
        width: 90%;
        margin: 20px auto;
        border: 1px solid #222;
        background-color: #111;
        background-image: -moz-linear-gradient(#444, #111); 
        background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111));    
        background-image: -webkit-linear-gradient(#444, #111);    
        background-image: -o-linear-gradient(#444, #111);
        background-image: -ms-linear-gradient(#444, #111);
        background-image: linear-gradient(#444, #111);
        -moz-border-radius: 6px;
        -webkit-border-radius: 6px;
        border-radius: 6px;
        -moz-box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
        -webkit-box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
        box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
    }
    
    #menu:before,
    #menu:after {
        content: "";
        display: table;
    }
    
    #menu:after {
        clear: both;
    }
    
    #menu {
        zoom:1;
    }
    
    #menu li {
        float: left;
        border-right: 1px solid #222;
        -moz-box-shadow: 1px 0 0 #444;
        -webkit-box-shadow: 1px 0 0 #444;
        box-shadow: 1px 0 0 #444;
        position: relative;
    }
    
    #menu a {
        float: left;
        padding: 12px 30px;
        color: #999;
        text-transform: uppercase;
        font: bold 12px Arial, Helvetica;
        text-decoration: none;
        text-shadow: 0 1px 0 #000;
    }
    
    #menu li:hover > a {
        color: #fafafa;
    }
    
    *html #menu li a:hover { /* IE6 only */
        color: #fafafa;
    }
    
    #menu ul {
        margin: 20px 0 0 0;
        _margin: 0; /*IE6 only*/
        opacity: 0;
        visibility: hidden;
        position: absolute;
        top: 38px;
        left: 0;
        z-index: 9999;    
        background: #444;
        background: -moz-linear-gradient(#444, #111);
       ...

JavaScript

if ($.browser.msie && $.browser.version.substr(0, 1) < 7) {
    $('li').has('ul').mouseover(function() {
        $(this).children('ul').css('visibility', 'visible');
    }).mouseout(function() {
        $(this).children('ul').css('visibility', 'hidden');
    })
}