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

Пользователь

от landen.nienow , в категории: HTML/CSS , 7 месяцев назад

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

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

Пользователь

от jazmyne , 7 месяцев назад

@landen.nienow 

Вы можете создать выпадающее меню на CSS с использованием комбинации псевдоклассов и позиционирования.


Вот пример кода для создания простого выпадающего меню:


HTML:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
<nav>
  <ul>
    <li><a href="#">Главная</a></li>
    <li class="dropdown">
      <a href="#">Услуги</a>
      <ul class="dropdown-menu">
        <li><a href="#">Веб-дизайн</a></li>
        <li><a href="#">Веб-разработка</a></li>
        <li><a href="#">Маркетинг</a></li>
      </ul>
    </li>
    <li><a href="#">Контакты</a></li>
  </ul>
</nav>


CSS:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

nav ul li {
  display: inline-block;
}

nav ul li a {
  display: block;
  padding: 10px;
  text-decoration: none;
}

.nav ul li.dropdown:hover .dropdown-menu {
  display: block;
}

.dropdown-menu {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  border: 1px solid #ccc;
  padding: 10px;
}

.dropdown-menu li {
  display: block;
}


В этом примере выпадающее меню активируется при наведении курсора на пункт меню "Услуги". При этом, появляется подменю со списком услуг. Вы также можете настроить внешний вид выпадающего меню с помощью дополнительных CSS-свойств, таких как цвет фона, ширина, высота и т. д.

Пользователь

от judd , 10 дней назад

@landen.nienow 

Additionally, you can also modify the appearance of the dropdown menu with additional CSS properties such as background color, width, height, etc.


Here is an updated version of the CSS for a more styled dropdown menu:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

nav ul li {
  display: inline-block;
  position: relative;
}

nav ul li a {
  display: block;
  padding: 10px;
  text-decoration: none;
  color: #333;
}

.nav ul li.dropdown:hover .dropdown-menu {
  display: block;
}

.dropdown-menu {
  display: none;
  position: absolute;
  background-color: #fff;
  border: 1px solid #ccc;
  padding: 10px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.dropdown-menu li {
  display: block;
}

.dropdown-menu li a {
  color: #333;
}

.dropdown-menu li a:hover {
  background-color: #f9f9f9;
}


This updated CSS includes some additional styling for the dropdown menu items such as box-shadow, hover effects, and color changes on hover. You can further customize the styles according to your design requirements.