JSFiddle - React, Tailwind, and code Playground

by krytizna921

HTML

<div class="module_menu">
			<div>
				<div>
					<div>
<ul class="menu">
	<li class="active item8"><a href=""><span>Пункт меню 1</span></a></li>
	<li class="item9"><a href="#"><span>Пункт меню 2</span></a></li>
	<li class="item10"><a href="#"><span>Пункт меню больше букв 3</span></a></li>
	<li class="item11"><a href="#"><span>Пункт меню 4</span></a></li>
	<li class="item12"><a href="#"><span>Пункт меню 5</span></a></li>
</ul>
</div>
				</div>
			</div>
		</div>

CSS

.module_menu {
	margin: 0px;
	padding: 0px;
	width:		62em;
}

.menu, .menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
}

	.menu li {
		float: left;
		background: none;
		margin-right: 36px;
	}
	
	.menu a {
	  color: #B79A5B;
	  padding: 4px 10px;
	  background: none;
	}
	
	.menu li span{  
		
		margin: 0 -50px 0 -50px;
		padding: 0 50px 0 50px;
	}
	
	.menu li span:hover{
		background: url(polosa.png) 50% 50% no-repeat;
		margin: 0 -50px 0 -50px;
		padding: 0 50px 0 50px
	}
	
	.menu li.active span{
		background: #B79A5B;
		background: url(polosa.png) 50% 50% no-repeat;
	}
		.menu li.active a{
			color:	#000;
		}