Как создать: Верхняя навигационная панель

Предыдущая страница Табы при наведении
Следующая страница Адаптивная верхняя навигационная панель

Узнайте, как использовать CSS для создания верхней навигационной панели.

Верхняя навигационная панель

Создать верхнюю навигационную панель

第一步 - Добавить HTML：

<div class="topnav">
  <a class="active" href="#home">Дом</a>
  <a href="#news">Новости</a>
  <a href="#contact">Контакт</a>
  <a href="#about">О нас</a>
</div>

第二步 - Добавить CSS：

/* Добавить черный цвет фона для верхней навигационной панели */
.topnav {
  background-color: #333;
  overflow: hidden;
}
/* Установить стиль ссылок в навигационной панели */
.topnav a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}
/* Изменить цвет ссылки при наведении мыши */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}
/* Добавить цвет для активной/текущей ссылки */
.topnav a.active {
  background-color: #04AA6D;
  color: white;
}

попробуйте сами