JSFiddle - React, Tailwind, and code Playground

by davidpauljunior

HTML

<div id="menu-primary">
    <ul class="sub-menu">
        <li><a href="#">Menu Item</a></li>
        <li><a href="#">Menu Item</a></li>
        <li><a href="#">Menu Item</a></li>
        <li><a href="#">Menu Item</a></li>
    </ul>
</div>

CSS

#menu-primary .sub-menu {    
    background:url('http://placehold.it/159x20') no-repeat 0 0;
    width:159px;
    padding-bottom:6px;
    position: relative;
}

#menu-primary .sub-menu:after {
    content: '';
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 20px; /* Height of image */
    background: url('http://placehold.it/159x20/ff0000') no-repeat 0 0;
}

#menu-primary .sub-menu li {  
    position: relative;
    z-index: 1;
}