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

[Anonymous]

Я пытался сделать пользовательский интерфейс моего профиля /веб-сайта более чище.

Ранее я просил некоторую помощь о том, как сделать мои выпадающие меню иметь более плавную анимацию.

Теперь он отлично смотрится в веб-версии! Но когда я смотрю на мобильный макет, мои выпадающие меню (

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

nav-link dropdown-toggle

) есть проблема. При открытии меню на Navbar, между моим «просмотром» и «отправкой» есть большие пробелы. Вот CSS и 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