html - 需要有关带有 float 的菜单的建议，该菜单会弄乱其他 div

Question

我的问题是我的网站顶部有一个 div，它有一个下拉菜单，左边有一个 float ，问题是在那个 div 下面，每当​​我将鼠标悬停在菜单标题也 float 到左侧。

我尝试在顶部 div 之后做一个清晰的 div，然后在 css 上使用 clear:both;但这并没有真正帮助

这是 JSfiddle:

http://jsfiddle.net/Safushi/XRNP5/

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。