Question

我正在为我的网站制作导航，并且我使用div和:hover属性与我的下拉菜单中的图像相结合。

#top .main-menu-container {
    position: relative;
}
#top .main-menu {
    margin: 0; 
    padding: 0; 
    list-style: none; 
    z-index: 98;
}
#top .main-menu li {
    float: left; 
    margin-right: 15px;
}
#top .main-menu  img{
    margin-top: 10px;
}
#top .main-menu li:hover .sub-menu {
    display: block;
}
.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; 
}

我的CSS包括这个，以防任何人可以看到任何立即错误。

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

JSFiddle演示。

Answer 1

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

快速解决这个问题的方法是在父元素上抛出position: relative;，在推送周围元素的子元素（div）上抛出position: absolute;。

Here's a link to a jsfiddle:

更多细节：

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

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

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

Answer 2

更新了Fiddle

#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;   
}

div：hover工作但将div移动到它的右边

2 个答案: