JSFiddle - React, Tailwind, and code Playground

HTML

<div id="brotainer">
    <nav id="ie-hates-us">
        <ul class="nav">
            <li>I'm for reals
                <ul class="sub">
                    <li>Perhaps</li>
                    <li>some sort</li>
                    <li>of</li>
                    <li>drop down</li>
                    <li>navi?</li>
                    <li>totes =( </li>
                </ul>
            </li>
        </ul>
    </nav>
</div>

CSS

#brotainer {
    position: relative;
    z-index: 9999;
}

#ie-hates-us {
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000');
    
    background-color: #bada55;
    border: 1px solid pink;
    height: 20px;
    margin: 0;
    padding: 0;
    position: fixed; 
    width: 290px;
/* This seems to break everything if you use z-index here 
    z-index: 9999;
*/
}

#ie-hates-us .nav > li .sub {
    color: red;
    margin: 0;
    padding: 0 5px;
    position: absolute;
    top: 25px;
    z-index: 9999;
    display:none;
}
#ie-hates-us .nav > li:hover .sub
{
    display:block;
}
}