JSFiddle - React, Tailwind, and code Playground

by Erik Woods

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.js"></script>
<ul class="main-nav">
    <li>
        <a href="#">First/Second Gen</a>
        <ul>
            <li><a href="http://google.com">Odyssey 500</a></li>
            <li><a href="http://xbox.com">Atari 2600</a></li>
            <li><a href="http://erikwoods.com">Odyssey 2</a></li>
            <li><a href="http://facebook.com">ColecoVision</a></li>
        </ul>
    </li>
    <li>
        <a href="#">Third Gen</a>
        <ul>
            <li>Atari 7800</li>
            <li>NES</li>
        </ul>
    </li>
    <li>
        <a href="#">Fourth Gen</a>
        <ul>
            <li>Game Boy</li>
            <li>Genesis</li>
            <li>Game Gear</li>
            <li>SNES</li>
            <li>Sega CD</li>
        </ul>
    </li>
    <li>
        <a href="#">Fifth Gen</a>
        <ul>
            <li>Sega Saturn</li>
            <li>PSX</li>
            <li>N64</li>
            <li>Game Boy Color</li>
        </ul>
    </li>
    <li>
        <a href="#">Sixth Gen</a>
        <ul>
            <li>Sega Dreamcast</li>
            <li>PS2</li>
            <li>Game Boy Advance</li>
            <li>Xbox</li>
            <li>GameCube</li>
        </ul>
    </li>
    <li>
        <a href="#">Seventh Gen</a>
        <ul>
            <li>Nintendo DS</li>
            <li>PSP</li>
            <li>Xbox 360</li>
            <li>PS3</li>
            <li>Wii</li>
        </ul>
    </li>
    <li>
        <a href="#">Eighth Gen</a>
        <ul>
            <li>Nintendo 3DS</li>
            <li>PS Vita</li>
            <li>Wii U</li>
            <li>PS4</li>
            <li>Xbox One</li>
        </ul>
    </li>
    <li>
        <a href="#">Other</a>
        <ul>
            <li>Xbox LIVE Arcade</li>
            <li>PSN</li>
            <li>Nintendo eShop</li>
            <li>iOS</li>
            <li>Steam</li>
            <li>Origin</li>
            <li>PC</li>
            <li>Game &amp;...

SCSS

.main-nav > li {
    cursor: pointer;
    float: left;
    min-width: 11%;
    position: relative;
    text-align: center;

    ul {
        background: #0f0;
        display: none;
        left: 0;
        min-width: 100%;
        position: absolute;
        text-align: center;
        top: 100%;
    }
}

.main-nav > li:hover ul {
    display: block;
}

JavaScript

// WIP games menu