JSFiddle - React, Tailwind, and code Playground

by genelocklin

HTML

<nav>
    <a href="#">Hover</a>

<ul>
    <li><a href="#">Link 1</a></li>    
    <li><a href="#">Link 2</a></li>    
    <li><a href="#">Link 3</a></li>    
    <li><a href="#">Link 4</a></li>    
    <li><a href="#">Link 5</a></li>
</ul>
        
    </nav>

SCSS

* { margin: 0; padding: 0; box-sizing: border-box; }

html { font-size: 100%; }

body { 
    max-width: 600px; 
    margin: 3em auto;
    background: #f6f5f4 url(http://f.cl.ly/items/0G3l1S3d0K39232G0p1W/generated.png) 0 0 repeat;
    font { 
        family: sans-serif;
        size: 100%;    
    }
    line-height: 1.6em;
}

a { 
   text-decoration: none;
   font-family: sans-serif;
}



nav a:first-of-type { 
    color: #000;
    & ~ ul { 
        position: absolute;
        left: -999em;
        list-style: none;
        list-style-image: none;
        width: 60%;
        padding: 1em;
        background: rgb(181,189,200);
            &:before { 
            height: 20%;
            width: 5%;
            background: rgb(181,189,200);
            content: "";
            left: 5%;
            top: -5%;
            position: absolute;
            -webkit-transform:rotate(45deg);
            -moz-transform:rotate(45deg);
            -ms-transform:rotate(45deg);
            -o-transform:rotate(45deg);
            transform:rotate(45deg);
        }
    }
    &:hover { 
        & ~ ul { 
            padding-top: 1em;
            position: relative;
            left: 0;
                & a { 
                    color: #fff;  
                }

        }
    }
    
}