Почему мое раскрывающееся меню не подключается и не исчезает? ⇐ CSS

[Anonymous]

Изображение панели навигации.
Итак, я создаю панель навигации для своего класса, но раскрывающийся список не подключается и исчезает в тот момент, когда я перехожу к щелчку. Если я перейду к вкладке, я могу нажать Enter, чтобы перейти на страницы. Я попытался создать оболочку div в своем HTML, как я нашел в аналогичном случае на этом веб-сайте, но он просто распределяет меню по странице. Этот код был взят из черной навигационной панели этого сайта. Будем признательны за любую помощь.
РЕДАКТИРОВАТЬ: Веб-сайт загружен в Chrome.

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

nav {
display: block;
font-size: 1rem;
grid-template-rows: (6, 1fr);
grid-auto-flow: column;
align-items: left;
grid-template-rows: (auto-fit);
background: black;
height: 50px;
width: 100%;
}

#nav {
font-size: 14px;
text-align: justify;
z-index: 10;
color: white;
position: relative;
list-style: none outside none;
margin: 0;
padding-top: 10px;
}

#nav span {
display: none;
}

#nav {
font-size: 15px;
text-align: justify;
z-index: 10;
color: white;
position: relative;
list-style: none outside none;
margin: 0;
padding: 10px 0px 0px 18px;
}

#nav ul {

list-style: none outside none;
}

#nav ul.subs {
display: none;
left: -1px;
padding: 2px;
position: absolute;
width: 99.8%;
}

#nav>li {
float: left;
text-align: left;
width: auto;
padding-right: 14px;
padding-bottom: 10px;
}

#nav li a {
display: block;
text-decoration: none;
white-space: normal;
color: white;
font-size: 16.5px;
padding: 4px 1px 1.5px;
border-bottom: 3px solid transparent;
transition: border-bottom 0.2s linear, color 0.2s linear;
}

#nav li:hover a,
#nav a:hover {
color: #629bcb;
border-bottom: 3px solid #629bcb;
transition: border-bottom 0.2s linear, color 0.2s linear;
}

#nav li:hover ul.subs {
display: block;
background-color: rgba(0, 0, 0, 0.8);
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(3px);

}

#nav ul.subs>li {
display: inline-block;
float: none;
padding: 0px;
vertical-align: top;
width: 33%;
position: absolute;
}

#nav ul.subs>li a {
color: white;
line-height: 20px;
transition: background-color 0.2s linear;
}

#nav ul li a:hover {
background-color: rgba(0, 103, 177, 0.8);
transition: background-color 0.2s linear;
}

#nav ul.subs>li>a {
margin-bottom: 10px;

}

#nav ul.subs>li li {
float: none;
transition: padding-left 0.2s linear;
}

#nav ul.subs>li li:hover {
padding-left: 4px;
transition: padding-left 0.2s linear;
}

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

[list]
[*][url=index.php]Home[/url]
[*][url=bio.php]Bio[/url]
[*][url=#personal]Personal[/url]


[url=wedding.php]Wedding[/url]
[url=hobbies.php]Hobbies[/url]

[/list]

[*][url=recipe.php]Recipe[/url]
[*][url=#performances]Performances[/url]

[list]
 [url=acting.php]Acting[/url]
[url=standup.php]Stand-up[/url]

[/list]

[*][url=contacts.php]Contacts[/url]

Подробнее здесь: https://stackoverflow.com/questions/798 ... sappearing