Выпадающее меню на панели навигации с прокруткой overflow-x и видимым overflow-y [дубликат] ⇐ Html

[Anonymous]

Я работаю над созданием панели навигации с горизонтальной прокруткой. Пока все идет хорошо. Однако, когда на вкладке открывается раскрывающееся меню, я хочу отключить вертикальную прокрутку, сохраняя при этом активную горизонтальную прокрутку. Как ни странно, в настоящее время прокрутка включена в обоих направлениях.
Код HTML и CSS представлен ниже.

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

/* ===========================
HEADER - NAVBAR
=========================== */

header {
background-color: #fff;

display: flex;
justify-content: space-around;
align-items: center;

position: sticky;
top: 0;
z-index: 1000;

border-bottom: 1px solid #e0e0e0;
padding: 0.5rem 1rem;
transition: width 0.5s ease, height 0.5s ease;
}

header img {
width: 100px;
height: 100px;
gap: 0.5rem;
transition: width 0.5s ease, height 0.5s ease;
}

nav {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
margin-left: 1rem;

box-sizing: border-box;

max-width: 100%;

/* overflow-x: auto; */
overflow: visible;
position: relative;

white-space: nowrap;
}

nav a {
text-decoration: none;
flex: 0 0 auto;
scroll-snap-align: center;

color: #000000;
font-weight: 500;
font-size: 1.4rem;
/* Check here !!! */
text-align: center;

padding: 0.5rem 0.5rem;
transform: scale(0.8);
transition: color 0.3s ease, border-bottom 0.3s ease;

/* Additive attribute for no linked [url=#]Tab1[/url]
[url=#]Tab2[/url]
[url=#]Tab3[/url]
[url=#]Tab4[/url]
[url=#]Tab5[/url]


[url=#]Option1[/url]
[url=#]Option2[/url]

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