Как убрать выпадающее меню из режима «всегда на дисплее»? ⇐ CSS

[Anonymous]

Я все еще новичок и создал панель навигации для веб-сайта с использованием HTML и CSS. На вкладке «Службы» есть раскрывающийся список, но список остается на дисплее, даже если для параметра «Отображение» установлено значение «Нет». Может ли кто-нибудь помочь мне в этой проблеме. Я перепробовал много вещей сейчас и не могу решить проблему. Я добавил код, который использовал:

Код: Выделить всё

Navigation Bar with Dropdown

body {
margin: 0;
font-family: Arial, sans-serif;
}

.navbar {
display: flex;
justify-content: space-between;
align-items: center;
background: linear-gradient(to right, #6a1b9a, #2e7d32);
padding: 10px 20px;
border-radius: 30px;
}

.navbar ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex: 1;
justify-content: space-evenly;
align-items: center;
}

.navbar li {
position: relative;
}

.navbar a {
text-decoration: none;
color: #fff;
font-size: 16px;
font-weight: bold;
transition: color 0.3s ease;
}

.navbar a:hover {
color: #d1c4e9;
}
/* Dropdown Menu */

.dropdown {
display: none;
/* Hidden by default */
position: absolute;
top: 100%;
left: 0;
background-color: #6a1b9a;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
z-index: 1000;
width: max-content;
}

.dropdown li {
margin: 0;
}

.dropdown a {
display: block;
padding: 10px 20px;
white-space: nowrap;
color: #fff;
font-weight: normal;
text-align: left;
}

.dropdown a:hover {
background-color: #4a148c;
}

.navbar li:hover>.dropdown {
display: block;
}





[list]
[*][url=#home]Home[/url]
[*][url=#about]About[/url]
[*]
[url=#services]Services[/url]


[url=#]Link 1[/url]
[*][url=#]Link 2[/url]
[*][url=#]Link 3[/url]
[/list]

[*][url=#articles]Articles[/url]
[*][url=#contact]Contact[/url]

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

Подробнее здесь: https://stackoverflow.com/questions/792 ... on-display