JSFiddle - React, Tailwind, and code Playground

by poselab

HTML

<body>
    		<nav>
    			<ul>
    				<li><a href="#">Home</a></li>
    				<li><a href="#">About</a></li>
    				<li class="expand"><a href="#">Product</a>
    					   <ul>
    						   <li><a href="#">pro1</a></li>
    						   <li><a href="#">pro2</a></li>
    						   <li><a href="#">pro3</a></li>
    					   </ul>
    				</li>
    				<li><a href="#">lalalalalalala</a></li>
    				<li><a href="#">Pickles</a></li>
    				<li><a href="#">Contact</a></li>
    			</ul>
    		</nav>
    </body>

CSS

nav {
    top:50px;
    line-height:20px;
    font-size:20px;
    width:calc(6*150px);
    height:auto;
    box-sizing:border-box;
    }
    nav ul {
    margin:0;padding:0;
    list-style-type:none;
    }
    nav ul li {
    border:1px solid blue;
    border-right:none;border-top:none;border-left:none;
    float:left;
    width:150px;
    background-color:white;
    box-sizing:border-box;
    }
    nav ul li a {
    display:block;
    width:150px;
    padding:5px 0;
    text-align:center;
    }
    nav ul li:hover {
    background:orange;
    }
    nav ul li ul {
    display:none;
    }
    nav ul li:hover > ul {
    display:block;
    position:absolute;
    left:-450px+900px; /*margin-left + width of #nav*/
    top:31px;
    width:150px;
    color:black;
    }
    a:link, a:visited {
    color:black;
    font-family:Arial;
    text-decoration:none;
    }
    li.expand:before {
    content:'';
    position:absolute;
    height:0; 
    width:0;
    border-left:15px solid transparent;  /* left arrow slant */
    border-right:15px solid transparent; /* right arrow slant */
    border-top:15px solid blue; /*bg color here*/
    margin-left:60px; /*75-15*/
    margin-top:30px;
    }
    li.expand:after {
    content:'';
    position:absolute;
    height:0; 
    width:0;
    border-left:14px solid transparent;  /* left arrow slant */
    border-right:14px solid transparent; /* right arrow slant */
    border-top:14px solid rgba(0,0,0,0.5); /*bg color here*/
    margin-left:60.5px;
    }
    li.expand:hover:after,li.expand:hover:before {
    display:none;
    }