Проблема с CSS для переполнения раскрывающегося списка ⇐ CSS

[Anonymous]

Я создал эту фиктивную верхнюю панель навигации, где у меня есть несколько раскрывающихся списков, которые можно прокручивать по оси X с помощью кнопок, если их несколько. Но когда я открываю раскрывающийся список, он открывается в режиме прокрутки по оси Y. скорее, он должен открываться сверху. Перепробовал множество вещей, ничего не помогло. Это выглядит как простая проблема, но она явно поработала над моим мозгом.
Создал здесь фиктивную панель навигации
https://codesandbox.io/p/sandbox/87jmzv


import React, { useState } from 'react';

const TopNav = () => {
const [scrollPosition, setScrollPosition] = useState(0);

// Array of dropdowns, each with its own set of options
const dropdowns = [
{ id: 'dropdown1', label: 'Dropdown 1', options: ['Option 1', 'Option 2', 'Option 3'] },
{ id: 'dropdown2', label: 'Dropdown 2', options: ['Option A', 'Option B', 'Option C'] },
{ id: 'dropdown3', label: 'Dropdown 3', options: ['Option X', 'Option Y', 'Option Z'] },
{ id: 'dropdown2', label: 'Dropdown 2', options: ['Option A', 'Option B', 'Option C'] },
{ id: 'dropdown2', label: 'Dropdown 2', options: ['Option A', 'Option B', 'Option C'] },

{ id: 'dropdown2', label: 'Dropdown 2', options: ['Option A', 'Option B', 'Option C'] },

{ id: 'dropdown2', label: 'Dropdown 2', options: ['Option A', 'Option B', 'Option C'] },

// You can add more dropdowns here
];

const scrollLeft = () => {
setScrollPosition((prev) => Math.max(prev - 200, 0));
};

const scrollRight = () => {
setScrollPosition((prev) => Math.min(prev + 200, (dropdowns.length - 3) * 200));
};

return (

{/* Logo on the left */}
Logo

{/* Left Arrow Button */}
←

{/* Scrollable Dropdown List */}


{dropdowns.map((dropdown) => (

))}



{/* Right Arrow Button */}
→

);
};

const CustomDropdown = ({ label, options }) => {
const [isOpen, setIsOpen] = useState(false);
const [selectedOption, setSelectedOption] = useState(null);

const toggleDropdown = () => {
setIsOpen((prev) => !prev);
};

const selectOption = (option) => {
setSelectedOption(option);
setIsOpen(false); // Close dropdown after selecting
};

return (


{selectedOption || label}

{isOpen && (

{options.map((option, index) => (
selectOption(option)}>
{option}

))}

)}

);
};

экспортировать TopNav по умолчанию;
css
/* Top Navigation Styling */
.top-nav {
display: flex;
align-items: center;
padding: 10px;
background-color: #f4f4f4;
border-bottom: 1px solid #ccc;
}

/* Logo Styling */
.logo {
font-size: 20px;
font-weight: bold;
margin-right: 20px;
}

/* Arrow Button Styling */
.arrow-button {
background-color: transparent;
border: none;
font-size: 20px;
cursor: pointer;
padding: 5px;
}

/* Dropdown Container Styling */
.dropdowns-container {
display: flex;
overflow-x: hidden;
width: 300px;
border: 1px solid #ccc;
padding: 5px;
}

/* Wrapper to handle scrolling */
.dropdowns-wrapper {
display: flex;
transition: transform 0.3s ease;
}

/* Individual Dropdown Styling */
.dropdown {
margin: 0 10px;
position: relative;
}

/* Label Styling */
.dropdown-label {
font-size: 14px;
margin-bottom: 5px;
font-weight: bold;
cursor: pointer;
padding: 5px;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 4px;
}

/* Custom Dropdown List */
.dropdown-list {
position: absolute;
top: 30px;
left: 0;
background-color: #fff;
border: 1px solid #ccc;
padding: 5px 0;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
z-index: 10;
width: 150px;
}

/* Dropdown Item Styling */
.dropdown-item {
padding: 8px 10px;
cursor: pointer;
}

.dropdown-item:hover {
background-color: #f4f4f4;
}


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