Html меню на сайте, как лучше реализовать?

.topmenu { 
	width: 90%; 
	height: 35px; 
	background: linear-gradient(to top,#202020,#454545); 
	border-radius: 5px; 
	margin-left: 5%; 
	margin-right: 5%;  
 
} 
.a { 
	margin: 0; 
	font-family: Helvetica; 
	font-size: 22px; 
		color: #e3e3e3;3	text-align: center; 
	font-style: normal; 
	color: white; 
	text-decoration: none; 
} 
.menu2{ 
	display: inline-block; 
	padding-right: 25px;  
	padding-left: 25px; 
	padding-top: 4px; 
	padding-bottom: 5px; 
} 
.menu3{ 
	display: inline-block; 
	padding-right: 25px;  
	padding-left: 25px; 
	padding-top: 4px; 
	padding-bottom: 5px; 
} 
.menu4{ 
	display: inline-block; 
	padding-right: 25px;  
	padding-left: 25px; 
	padding-top: 4px; 
	padding-bottom: 5px; 
} 
.menu5{ 
	display: inline-block; 
	padding-right: 25px;  
	padding-left: 25px; 
	padding-top: 4px; 
	padding-bottom: 5px; 
} 
.menu6{ 
	display: inline-block; 
	padding-right: 25px;  
	padding-left: 25px; 
	padding-top: 4px; 
	padding-bottom: 5px; 
} 
.menu1{ 
	display: inline-block; 
	padding-right: 25px;  
	padding-left: 25px; 
	padding-top: 4px; 
	padding-bottom: 5px; 
} 
.menu1:hover{ 
	 transition: 0.5s; 
	background-color: #b83c2e; 
	border-radius: 5px 0 0 5px; 
} 
.menu2:hover{ 
	 transition: 0.5s; 
	background-color: #b83c2e; 
} 
 
.menu3:hover{ 
	transition: 0.5s; 
	background-color: #b83c2e; 
} 
 
.menu4:hover{ 
	 transition: 0.5s; 
	background-color: #b83c2e; 
} 
 
.menu5:hover{ 
	transition: 0.5s; 
	background-color: #b83c2e; 
} 
 
.menu6:hover{ 
	 transition: 0.5s; 
	background-color: #b83c2e; 
} 
.menu5::not(:hover){ 
	 transition: 0.5s;  
} 
.menu4::not(:hover){ 
	 transition: 0.5s;  
} 
 
.menu3::not(:hover){ 
	 transition: 0.5s; 
} 
 
.menu2::not(:hover){ 
	 transition: 0.5s;  
} 
 
.menu1::not(:hover){ 
	 transition: 0.5s;  
} 
.menu6::not(:hover){ 
	 transition: 0.5s;  
} 
 
.menu1::active{ 
	background-color: #b83c2e; 
} 
 
.menu7 { 
	float: right; 
	padding-right: 25px; 
	padding-top: 4px; 
	padding-bottom: 5px; 
}

		<div class="topmenu"> 
				<div class="menu1"> 
					<a href="#" class="a">Home</a> 
				</div> 
				<div class="menu2"> 
					<a href="#" class="a">About Us </a> 
				</div> 
				<div class="menu3"> 
					<a href="#" class="a">Our services</a> 
				</div> 
				<div class="menu4"> 
					<a href="#" class="a">Deposits</a> 
				</div> 
				<div class="menu5"> 
					<a href="#" class="a">FAQs</a> 
				</div> 
				<div class="menu6"> 
					<a href="#" class="a">Contact us</a> 
				</div> 
				<div class="menu7"> 
					<a href="tel:(2457) 555 222 333" class="a">Call Us: (2457) 555 222 333</a> 
				</div> 
		</div>