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

[Anonymous]

Я пытаюсь создать, используя только CSS, меню, которое:

• всегда остается вверху страницы при прокрутке
• и при наведении указателя мыши раскрывается несколько раскрывающихся списков.

Проблема, с которой я сталкиваюсь, заключается в том, что имена элементов в один из раскрывающихся списков длиннее, чем название самого раскрывающегося списка, соседний раскрывающийся список справа перемещается вправо до ширины открытого раскрывающегося списка:
Перед наведением курсора:


При наведении:


Я хочу, чтобы второй раскрывающийся список не отображался при наведении курсора на первый:


Что следует исправить в коде?

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

.nav_menu {
overflow: hidden;
position: fixed;
top: 0;
width: 100%;
color: #ffffff;
}

.nav_bar { /* nav_menu background to keep it transparent and to add background only to top bar */
overflow: hidden;
background-color: #000000;
position: absolute;
top: 0;
width: 100%;
height: 2.1em;
z-index: -100; /* to show behind menu buttons */
}

/* Menu items with dropdowns */

.menu_drop { /* dropdown with menu items */
float: left;
overflow: hidden
}

.drop_button { /* a button that opens dropdown */
color: inherit;
background-color: inherit;
font-family: inherit; /* to be the same as parent */
font-size: inherit;
padding: 0.5em;
border: none;
outline: none
}

.drop_items {
display: none;
position: relative;
background-color: #c0c0c0;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1
}

.drop_items a {
float: none;
display: block;
text-align:left;
padding: 0.5em;
color: #000000;
text-decoration: none
}

.drop_items a:hover {
color: #ffffff;
background-color: #000000
}

.menu_drop:hover .drop_button { /* button color when hovered */
color: #000000;
background-color: #c0c0c0
}

.menu_drop:hover .drop_items { /* show dropdown when hovered */
display: block
}

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

 


Dropdown 1 ▼



Dropdown Menu Item 1.1


Dropdown Menu Item 1.2


Dropdown Menu Item 1.3





Dropdown 2 ▼



Dropdown Menu Item 2.1


Dropdown Menu Item 2.2


Dropdown Menu Item 2.3


Dropdown Menu Item 2.4

Подробнее здесь: https://stackoverflow.com/questions/786 ... s-made-wit