html :

html>
<html lang="fa">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./HorizontalMenu.css">
  <title>HorizontalMenutitle>
head>
<body dir="rtl">
  <nav class="nav">
    <ul class="inner">
      <li class="nav-item">خانهli>
      <li class="nav-item">دوره‌های آموزشیli>
      <li class="nav-item">بلاگli>
      <li class="nav-item">تماس با ماli>
      <li class="nav-item">درباره ماli>
    ul>
  nav>
body>

CSS :

body {
  background-color: #2c3e50;
}
ul, li {
  list-style: none;
}
.nav {
  background-color: #34495e;
  border-radius: 8px;
  max-width: 1000px;
  margin: 0 auto;
}
.nav .inner {
  display: flex;
  align-items: center;
  justify-content: center;
}
.nav .nav-item {
  padding: 0.9rem 1.1rem;
  color: #ffffff;
  cursor: pointer;
  transition: all .3s;
  border-radius: 8px;
}
.nav .nav-item:nth-child(1):hover {
  background-color: #1abc9c;
}
.nav .nav-item:nth-child(2):hover {
  background-color: #e74c3c;
}
.nav .nav-item:nth-child(3):hover {
  background-color: #3498db;
}
.nav .nav-item:nth-child(4):hover {
  background-color: #9b59b6;
}
.nav .nav-item:nth-child(5):hover {
  background-color: #e67e22;
}