JSFiddle - React, Tailwind, and code Playground

by alexscus lomov

HTML

<nav><ul>
	    <li>text<span>1 info</span></li>
	    <li>text<span>2 text text</span></li>
	    <li>text<span>3 text text</span></li>
	    <li>text<span>4 text </span></li>
	    <li>text<span>5 text text text text</span></li>
	    <li>text<span>6 text text</span></li>
</ul></nav>

CSS

nav {
	background: #ccc;
	color: #666;
	font-size: 14px;
	height: 56px;
	text-transform: uppercase;
	position: relative;
	text-align: justify;
	margin: 0 0 60px;
}
nav ul {
	list-style: none;
	margin: 0;
	padding: 0 20px;
	line-height: 56px;
}
nav li {
	display: inline-block;
}
nav ul:after {
	display: inline-block;
	width: 100%;
	content: '';
}
nav .hover span{ display:block;}
nav span{ display:none; position:absolute; left:0; top:56px; width:100%; background:#999; color:#fff; padding:0 10px; box-sizing:border-box;}

JavaScript

$('nav li').hover(function() {
		$(this).addClass('hover').siblings().removeClass('hover');
	});