Головна‎ > ‎HTML + CSS‎ > ‎Меню‎ > ‎

Вертикальне меню

<!DOCTYPE html>
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 200px;
    background-color: #f1f1f1;

li a {
    display: block;
    color: #000;
    padding: 8px 16px;
    text-decoration: none;

li a.active {
    background-color: #4CAF50;
    color: white;

li a:hover:not(.active) {
    background-color: #555;
    color: white;

<h2>Vertical Navigation Bar</h2>
<p>In this example, we create an "active" class with a green background color and a white text. The class is added to the "Home" link.</p>

  <li><a class="active" href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>