Все меню CSS, когда подменю hover show

Question

Это не мое место экспертизы, поэтому я даже не совсем уверен, как это работает. У меня есть одно меню, созданное отлично, которое работает, см. HERE.

Код:

<div style="display:inline-block" id="menu1outer"> 
    <div class="menus" style="cursor:pointer;">Menu</div> 
    <a href=""> 
     <div id="submenus1" class="submenus" style="background-color:#1734c7;"> 
     Sub 1 
     </div> 
    <a/> 
    <a href=""> 
     <div id="submenus1" class="submenus" style="background-color:#3151f6"> 
     Sub 2 
     </div> 
    <a/> 
    <a href=""> 
     <div id="submenus1" class="submenus" style="background-color:#6780ff"> 
     Sub 3 
     </div> 
    <a/> 
    </div> 

И CSS ниже:

.menus { 
    width:100px; 
    height:50px; 
    border: 5px solid #000000; 
    border-radius: 25px; 
    text-align: center; 
    line-height: 50px; 
    color: black; 
    background-color: #dcdcdd; 
} 
.submenus { 
    margin-top:10px; 
    display:none; 
    width:100px; 
    height:50px; 
    border: 5px solid #000000; 
    border-radius: 25px; 
    text-align: center; 
    line-height: 50px; 
    color: black; 
} 
#menu1outer:hover #submenus1 { 
    display: block; 
} 

Однако всякий раз, когда я добавить второе выпадающее меню, все испортится. Теперь, когда первое меню зависнет, отображаются подменю, но другое меню перемещается. Я уже пробовал позиционировать меню абсолютно, что также испортило div inline-block. Извините, если это сбивает с толку, пример помогает. Вот как это выглядит со вторым меню с ним. Fiddle

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

Answer 1

Самый простой способ в моем oppinion - поплавать «внешние» <div> элементы слева, а не позиционировать их «встроенным блоком». HTML будет выглядеть следующим образом:

<div style="float:left;" id="menu1outer"> 
    <a href=""><div class="menus">Menu 1</div></a> 
    <a href=""><div id="submenus1" class="submenus">Sub 1</div><a/> 
    <a href=""><div id="submenus1" class="submenus">Sub 2</div><a/> 
    <a href=""><div id="submenus1" class="submenus">Sub 3</div><a/> 
</div> 

<div style="margin-left:50px;float:left;" id="menu2outer"> 
    <a href=""><div class="menus">Menu 2</div></a> 
    <a href=""><div id="submenus2" class="submenus">Sub 1</div><a/> 
    <a href=""><div id="submenus2" class="submenus">Sub 2</div><a/> 
    <a href=""><div id="submenus2" class="submenus">Sub 3</div><a/> 
</div> 

Или просто проверить this скрипку.