JSFiddle - React, Tailwind, and code Playground

by PrinceofVegas

HTML

<div style="width: 900px; background-color: #006633; height: 40px;">
<ul id="nav">
    <li>Home</li>
    <li>Teams
    <ul class="nav first">
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
            <li>Item 4
            <ul class="nav">
                <li>Arroyo Grande Eagles</li>
                <li>Menu 2</li>
                <li>Menu 3</li>
                <li>Menu 4</li>
            </ul>            
        </li>
        </ul>
    </li>
    <li>Standings</li>
    <li>Schedule</li>
    <li>Playoffs</li>
    <li>Get Involved
    <ul class="nav first">
        <li>Student Reporters</li>
        <li>Faculty, Parents and Boosters</li>
        <li>Business Sponsors</li>
    </li>
</ul>
</div>

CSS

#nav, .nav, #nav .nav li { margin:0px; padding:0px; }
#nav li {float:left; display:inline; cursor:pointer; list-style:none; padding:0px 20px 0px 20px; border:0px #000 solid; position:relative; background-color: #006633;}
#nav li ul.first {left:-1px; top:100%; width: 300px;}

li, li a {color:#fff; text-decoration:none; line-height: 40px; font-size: 19px; font-family: "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;}
#nav .nav li { width:100%; text-indent:10px; line-height:40px; margin-right:10px; background:#006633;}
#nav li a {display:block; width:inherit; height:inherit;}

ul.nav { display:none; }
#nav li:hover > a, #nav li:hover { color:#fff; background:#003f20; }
li:hover > .nav { display:block; position:absolute; width:400px; top:-2px; left:100%; z-index:1000; border:1px #000 solid; }
li:hover { position:relative; z-index:2000; }