<nav>
  <ul class="menu">
    <li><a href="#">Beranda</a></li>
    <li><a href="#">Tentang Kami</a></li>
    <li><a href="#">Layanan</a></li>
    <li><a href="#">Kontak</a></li>
  </ul>
</nav>

/* Reset gaya default dari ul */
.menu {
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: #1297ff;
  font-family: tahoma;
}

/* Tampilan menu horisontal */
.menu li {
  display: inline-block;
  padding-bottom: 10px;
}

/* Tampilan link dalam menu */
.menu li a {
  display: block;
  padding: 10px 15px;
  color: #fff;
  text-decoration: none;
}

/* Efek hover pada link */
.menu li a:hover {
  background-color: #f8f8f8;
  color: #000;
}

/* Menyembunyikan tanda baca dalam link */
.menu li a::after {
  content: "";
  display: block;
  height: 2px;
  background-color: #000;
  opacity: 0;
  transition: opacity 0.3s;
}

/* Efek hover pada tanda baca */
.menu li a:hover::after {
  opacity: 1;
}
/* Mengatur tata letak menu horisontal ke kanan */
.menu {
  float: right;
}

/* Mengatur jarak antara menu dan konten */
.container {
  margin-top: 20px;
}
/* Tampilan menu horisontal pada perangkat dengan lebar layar kurang dari 768px */
@media (max-width: 768px) {
  .menu {
    float: none;
    text-align: center;
  }

  .menu li {
    display: block;
  }
}