Html div:hover可以工作，但会将div移到它的右侧

我正在为我的站点进行导航，并且在下拉菜单中使用divs和

：hover

属性以及图像

#顶部。主菜单容器{
位置：相对位置；
}
#顶部。主菜单{
保证金：0；
填充：0；
列表样式：无；
z指数：98；
}
#上。主菜单李{
浮动：左；
右边距：15px；
}
#顶部。主菜单img{
边缘顶部：10px；
}
#顶部。主菜单li：悬停。子菜单{
显示：块；
}
.子菜单{
背景色：#fafafa；
填充：10px；
保证金：-4px自动0px自动；
盒影：0 5px20px-2px#444；
显示：无；
左：0；
右：0；
宽度：200px；
z指数：99；
文本对齐：居中；
边框：1px实心#666；
边框左上半径：7px；
边框右下半径：7px；
}

我的CSS由这些组成，以防任何人看到任何即时错误

我的问题是，当您将鼠标悬停在图像上时，它会显示子菜单div，但它也会在页面上移动与子菜单div宽度相等的其他按钮

---

演示。

这是因为列表中的div正在将内容向右推

解决这个问题的一个快速方法是抛出一个

位置：relative和
位置：绝对


更多细节：

#top .main-menu li {
 position: relative;
}

下面告诉子菜单将自身定位到绝对左侧：相对于父元素的0位置

.sub-menu {
 //existing code
 position: absolute;
 left: 0;   
}

更新

这是因为链接按钮和子菜单下拉列表在同一个LI中。我不太确定如何解释它。你在暗示我做什么？将子菜单div移到有菜单按钮的LI之外。谢谢！这很有效。我看到它是如何修复的，我也从中吸取了教训！如果您不太了解相对和绝对定位相对于父对象的工作方式，那么相对和绝对定位可能会很棘手！我还需要多了解一点。我要找个侦察员
#top .main-menu li {
float: left; margin-right: 15px;
position:relative;
}
.sub-menu {
background-color: #fafafa;
padding: 10px; margin: -4px auto 0px auto; box-shadow: 0 5px 20px -2px #444;
display: none; 
left: 0; right: 0; width: 200px; z-index: 99; text-align: center;
border: 1px solid #666; border-top-left-radius: 7px; border-bottom-right-radius:7px;
position:absolute;   
}