Tạo kiểu cho liên kết hiện tại (active) trong navbar với CSS

Đánh dấu mục menu đang active

Thêm class .active vào <a> của trang hiện tại, sau đó tạo kiểu cho class đó.

Ví dụ minh họa

<!DOCTYPE html>
<html>
<head>
  <style>
    ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
      width: 200px;
    }
    li a {
      display: block;
      padding: 10px 15px;
      background-color: #F0E7E7;
      color: #333;
      text-decoration: none;
      border-bottom: 1px solid #ddd;
    }
    .active {
      background-color: #4CAF50;
      color: white;
    }
    li a:hover:not(.active) {
      background-color: #ddd;
    }
  </style>
</head>
<body>
  <ul>
    <li><a href="#home">Trang chủ</a></li>
    <li><a href="#company" class="active">Công ty</a></li>
    <li><a href="#product">Sản phẩm</a></li>
    <li><a href="#services">Dịch vụ</a></li>
    <li><a href="#contact">Liên hệ</a></li>
  </ul>
</body>
</html>

Mục "Công ty" có class active → nền xanh lá, chữ trắng. Hover các mục khác (trừ active) đổi nền xám nhẹ.