JSFiddle - React, Tailwind, and code Playground

by genelocklin

HTML

<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>

SCSS

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

body { 
    max-width: 600px; 
    width: 90%;
    min-width: 320px;
    margin: 3em auto;
}

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

ul { 
    list-style: none;
    list-style-image: none;
    width: 60%;
    padding: 1em;
    position: relative;
    background: rgb(181,189,200);
    &:before { 
        height: 40%;
        width: 15%;
        z-index: -10;
        background: rgb(181,189,200);
        content: "";
        left: 25%;
        top: -1em;
        position: absolute;
        -webkit-transform:rotate(45deg);
        -moz-transform:rotate(45deg);
        -ms-transform:rotate(45deg);
        -o-transform:rotate(45deg);
        transform:rotate(45deg);
    }
    
}

JavaScript

// via forrst post: http://forrst.com/posts/CSS_How_to_do_this_submenu_arrow-6En

// drop down example: http://jsfiddle.net/genelocklin/uGF3t/