Question

我的问题是，我的网站顶部有一个div，左下角有一个浮动下拉菜单，事情就是那个div，我希望每当我悬停时都有一个标题在菜单上，标题也浮动到左侧。

我尝试在top div之后做一个明确的div然后在css上使用clear:both;但它并没有真正帮助

这是JSfiddle：

ul {
font-size: 16px;
list-style: none;
}

ul li {
display: block;
position: relative;
float: left;
}

li ul {
display: none;
}

ul li a {
display: block;
text-decoration: none;
color: #ffffff;
padding: 5px 15px 5px 15px;
background: #464646;
white-space: nowrap;
}

ul li a:hover {
background: #565656;
}

是菜单的一些代码（必须粘贴一些代码才能粘贴JSfiddle链接）。

Answer 1

将通过添加

来修复

 position: absolute;

到包含子菜单的ul。

Answer 2

如果您不希望它影响其他元素，则子ul元素必须绝对定位。

Example Here

#top li > ul {
    position:absolute;
    width:100%;
}

正如Adrift所提到的，您可能还希望ul宽度为100%。

Answer 3

你有正确的HTML文件层，但属性＆＃34;位置＆＃34;错。

Demo

一旦标记结算position:absolute;，它只会被定位为引用其包含的块。因此，您需要设置#menu{postion:relative;}以使其父标记成为包含的块。事实上，现在子菜单已从正常流程中完全删除，因此不会影响其他标签的样式。

此外，我高度建议您拒绝使用后代选择器，这不仅会让您的浏览器变慢，而且代码维护也会更加复杂。

需要一个浮动菜单的建议，搞砸了其他div

3 个答案: