JSFiddle - React, Tailwind, and code Playground

by tonyjcamp

HTML

<div id="brotainer">
    <nav id="ie-hates-us">
        <ul>
            <li>I'm for reals
                <ul>
                    <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 ul > li ul {
    color: red;
    margin: 0;
    padding: 0 5px;
    position: absolute;
    top: 25px;
    z-index: 9999;
}