JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="mainMenu">
  			<li class="mainMenu-brand" id="1">Lada</li>
  			<li class="mainMenu-brand" id="2">Lada Sport</li>
  			<li class="mainMenu-brand" id="3">lifan</li>
  			<li class="mainMenu-brand" id="4">Changan</li>
  		</ul>
  		<ul class="mainSubmenu hidden" id="model1">
  			<li class="mainSubmenu-brand">largus</li>
  			<li class="mainSubmenu-brand">granta</li>
  			<li class="mainSubmenu-brand">priora</li>
  			<li class="mainSubmenu-brand">4/4</li>
  			<li class="mainSubmenu-brand">kalina</li>
  			<li class="mainSubmenu-brand">vesta</li>
  			<li class="mainSubmenu-brand">xray</li>
  		</ul>

CSS

div.bg {
	min-height: 544px;
	background-image: url(../image/background.jpg);
	background-size: auto auto;
	background-repeat: no-repeat;
}

.hidden {
	visibility: hidden;
}
.mainMenu {
	list-style: none;
	display: flex;
	position: relative;
}

.mainMenu-brand {
	flex-grow: 4;
	padding: 30px 25px;
	background-color: white;
}

.mainMenu-brand__click {
	margin: 0 0 -5px 0;
	border-bottom: 5px solid black;
}

li.mainMenu-brand:hover {
	margin: 0 0 -5px 0;
	border-bottom: 5px solid black;
}

/*-------*/
.mainSubmenu {
	display: flex;
	list-style: none;
	margin-top: 5px;
}
.mainSubmenu-brand {
	background-color: white;
	flex-grow: 7;
	padding: 30px 25px;
}
.mainSubmenu-brand:hover {
	background-color: blue;
	color: white;
}
.mainSubmenu-brand__click {
	background-color: blue;
	color: white;
}