Как сделать выпадающее меню в html css

Узнайте, как создать выпадающее меню при помощи HTML и CSS. Пример и пошаговая инструкция помогут вам реализовать это быстро и легко.

Делаем меню на HTML и CSS

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

Во-первых, мы должны начать с определения структуры нашего меню. Для нашего примера мы будем использовать следующую структуру:

<ul>
  <li><a href="#">Пункт меню 1</a>
    <ul>
      <li><a href="#">Подпункт меню 1</a></li>
      <li><a href="#">Подпункт меню 2</a></li>
      <li><a href="#">Подпункт меню 3</a></li>
    </ul>
  </li>
  <li><a href="#">Пункт меню 2</a></li>
  <li><a href="#">Пункт меню 3</a></li>
</ul>

В данном примере мы имеем главное меню с пунктами «Пункт меню 1», «Пункт меню 2» и «Пункт меню 3». Кроме того, у пункта «Пункт меню 1» есть свои подпункты «Подпункт меню 1», «Подпункт меню 2» и «Подпункт меню 3». Теперь мы можем приступить к работе с HTML и CSS.

Для начала мы добавим простой HTML-код для нашего меню:

<ul>
  <li><a href="#">Пункт меню 1</a>
    <ul>
      <li><a href="#">Подпункт меню 1</a></li>
      <li><a href="#">Подпункт меню 2</a></li>
      <li><a href="#">Подпункт меню 3</a></li>
    </ul>
  </li>
  <li><a href="#">Пункт меню 2</a></li>
  <li><a href="#">Пункт меню 3</a></li>
</ul>

Теперь мы можем добавить простой CSS-код для отображения меню на нашем сайте:

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
 
ul li {
  display: inline-block;
  position: relative;
  line-height: 21px;
  text-align: left;
}
 
ul li a {
  display: block;
  padding: 8px 25px;
  color: #333;
  text-decoration: none;
}
 
ul li a:hover {
  color: #fff;
  background: #939393;
}
 
ul li ul {
  display: none;
  position: absolute;
  top: 30px;
  left: 0;
  background: #fff;
  padding: 0;
}
 
ul li ul li {
  display: block;
}
 
ul li ul li a {
  padding: 8px 25px;
  color: #333;
  display: block;
}
 
ul li ul li a:hover {
  color: #fff;
  background: #939393;
}
 
ul li:hover ul {
  display: block;
}

В данном примере мы использовали несколько свойств CSS, чтобы заставить наше меню работать как надо. Свойство display: none; заставляет скрытое меню не отображаться, до тех пор, пока не будет вызвано свойство display: block;. Свойство position: absolute; позволяет нам указать позицию выпадающего меню относительно родительского элемента. Наконец, свойство position: relative; позволяет установить позицию элемента относительно его родительского элемента. С помощью этих свойств мы можем создать выпадающее меню, которое будет работать правильно.

Теперь, когда мы знаем, как создать выпадающее меню на HTML и CSS, мы можем добавить его на наш сайт. Все, что нам нужно сделать, — это вставить HTML-код и CSS-код на нашу страницу и мы готовы!