Войти
Регистрация

Подменю на CSS

Подменю на CSS

Здравствуйте, друзья!

Часто на разных сайтах приходилось наблюдать различного вида меню с вложенным подменю, которое выпадало при наведении или клике на тот или иной пункт меню.

Тема достаточно полезная, думаю многим будет интересно реализовать на своем сайте подменю с использованием чистого CSS.

Первое, что нам необходимо, это создать разметку обычного меню с пунктами подменю. Для этого используем список <ul> и в качестве подменю мы вложим в элемент с тегом <li> еще один список:

<ul id="nav">
  <li><a href="#">Главная</a></li>
  <li><a href="#">О нас</a></li>
  <li><a href="#">Услуги</a>
    <ul>
      <li>Оформление виз</li>
      <li>Туры по Европе</li>
      <li>Шоп-туры</li>
      <li>Недвижимость за рубежом</li>
      <li>Обучение за рубежом</li>
    </ul>
  </li>
  <li><a href="#">Контакты</a></li>
</ul>

Разметка вполне стандартная, здесь мы создали список c id=nav, каждый элемент меню мы сделали ссылкой с названием пункта меню и внутри элемента списка мы добавили еще один список, который послужит нам в качестве подменю.

Далее по плану у нас пойдет стилизация CSS.

Здесь логика следующая: скрываем список с подменю и при наведении на пункт меню этот список мы показываем. Ну также думаю, что можно сделать легкий дизайн меню.

#nav > li { // Пункты главного меню
  float: left;
  list-style-type: none;
  position: relative;
}
#nav li a { // Ссылки в пунктах меню
  border-radius: 3px;
  border: 1px solid;
  color: #000;
  display: block;
  margin: 5px;
  padding: 15px;
  text-decoration: none;
}
#nav li ul { // Подменю
  border: 1px solid;
  border-radius: 3px;
  display: none;
  list-style: none;
  margin-left: 5px;
  padding: 0;
  position: absolute;
}
#nav li ul li { // Пункты в подменю
  padding: 5px;
}
#nav li ul li:hover { // Стиль пунктов подменю при наведении
  background: #E9E9E9;
  cursor: pointer;
}
#nav li:hover > ul { // Показываем подменю при наведении на пункт главного меню
  display: block;
}

Меню с выпадающим подменю готово. Код достаточно простой. Я указал комментарии в таблице стилей, так что Вы можете уже по-своему стилизовать каждый элемент. Главное, что логика понятна. Используйте.

С уважением, Самвел Погосов

Рекомендую к изучению мой бесплатный видеокурс по HTML и CSS для начинающих с подробными видеоуроками и заданиями: Перейти к видеокурсу

Комментарии к статье

Бесплатный видеокурс

HTML и CSS для начинающих

Практический и бесплатный курс по основам HTML и CSS для начинающих. С этим курсом Вы сможете изучить базовые понятия верстки и стилей CSS. Курс с практическими уроками и заданиями, все видеоуроки последовательны и увлекательны. Я научу Вас всему, чему научился сам.

Получить курс
Опрос

Для чего Вы изучаете HTML и CSS?