当悬停显示子菜单时，所有的CSS菜单

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。对不起，如果这是令人困惑的例子有帮助。这是它的第二个菜单的外观。 Fiddle

此外，这似乎有点本地化，但它确实不是，只是我不知道如何把它放在一般的术语中，因为我不知道究竟是什么东西搞乱了，对这种东西不太好。

Answer 1

我的看法最简单的方法是将“外部”<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小提琴。