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

[Anonymous]

Я пытался сделать пользовательский интерфейс моего профиля/сайта выглядеть чище. Ранее я просил некоторую помощь о том, как сделать мои выпадающие меню иметь более плавную анимацию. Теперь это выглядит великолепно в веб -версии! Но когда я просматриваю мобильный макет, мои раскрывающиеся меню (выпадающий навигационные связи) возникают проблемы. При открытии меню на Navbar существуют большие пробелы между моим «просмотром» и «отправляемыми» выпадающими названиями. Я хотел бы посмотреть, смогу ли я избавиться от этого пространства, сохраняя при этом анимацию. Это возможность? Вот HTML: < /p>

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

/* Makes the dropdown menu fall downwards*/
.navbar-nav .dropdown-menu {
display: block;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, transform 0.3s ease;
transform: translateY(-10px);
}

.navbar-nav .nav-item.dropdown:hover .dropdown-menu {
opacity: 1;
visibility: visible;
transform: translateY(0);
}

.navbar-nav .dropdown-menu {
transition-delay: 0.1s;
}

.navbar-nav .dropdown-menu:hover {
opacity: 1;
visibility: visible;
}

/*makes the dropdown menu have movement inside the boxes*/
.dropdown-item {
width: 30px;
height: 30px;
transition: height 0.3s;
position: sticky;
transition-timing-function: linear;
}

.dropdown-item:hover {
height: 35px;
}

.dropdown-item:hover {
opacity: 1;
visibility: visible;
}

/*adds a small bounce to hoverable items*/
.side-nav a {
transition: transform 0.3s ease, transform 0.3s ease;
transition-timing-function: linear;
}

.side-nav a:hover {
transform: translateY(-1px);

}

.card.d-block.p-3.my-md-3 a {
transition: transform 0.3s ease, transform 0.3s ease;
transition-timing-function: linear;
}

.card.d-block.p-3.my-md-3 a:hover {
transform: translateY(-1px);
}

a.mb-2 {
transition: transform 0.3s ease, transform 0.3s ease;
transition-timing-function: linear;
}

a.mb-2:hover {
transform: translateY(-1px);
}< /code>


[url=https://toyhou.se]TOYHOU.SE[/url]






[list]
[*]
[url=https://toyhou.se/DeclineOfMySanity]
 Profile
[/url]

[*]
[url=https://toyhou.se/~forums]
 Forums
[/url]

[*]
[url=#]  Browse [/url]

Characters
[url=https://toyhou.se/~browse/popular][i][/i] Popular [/url]
[url=https://toyhou.se/~browse/feed][i][/i] Feed [/url]
[url=https://toyhou.se/~browse/recent][i][/i] Recent [/url]
[url=https://toyhou.se/~browse/search][i][/i] Search [/url]
Browse
[url=https://toyhou.se/~library/popular][i][/i] Literatures [/url]
[url=https://toyhou.se/~worlds][i][/i]  Worlds [/url]

[*]
[url=#]  Submit [/url]

[url=https://toyhou.se/~characters/create][i][/i] Character [/url]
[url=https://toyhou.se/~bulletins/create][i][/i] Bulletin [/url]
[url=https://toyhou.se/~images/upload][i][/i] Image [/url]
[url=https://toyhou.se/~images/multi-upload][i][/i] Multi-Images [/url]
[url=https://toyhou.se/~literatures/create][i][/i] Literature [/url]
[url=https://toyhou.se/~worlds/create][i][/i] World [/url]

[/list]

Вот скриншот проблемы:


Подробнее здесь: https://stackoverflow.com/questions/795 ... ropdown-me