JSFiddle - React, Tailwind, and code Playground

by kiokotzu

HTML

<nav>
    <ul>
        <li><span></span><a href="#">Menu 1</a></li>
        <li><a href="#">Menu 2</a></li>
    </ul>
</nav>

CSS

nav ul li { display: inline-block; background-color: blue; -webkit-transform: skew(20deg); }
nav ul li:hover { }
nav ul li span { height: 0px; width: 87px; background-color: black; position: absolute;top: 20px; transition: all 0.3s; }
nav ul li:hover span { background-color: black; display: block; height: 50px; position: absolute; width: 87px; top: 0px; }
nav ul li a { color: #ffffff; text-decoration: none; line-height: 50px; -webkit-transform: skew(-20deg); display: block; padding: 0 20px;}