css - 将鼠标悬停在导航按钮上时侧边栏移动

Question

我有一个带有按钮的导航栏，当您将鼠标悬停在它们上方时，这些按钮会升起。问题是内容也随之而来。就好像内容不会与其容器保持静态一样。我正在使用 z-index，所以很多定位必须是相对的，但尝试其他定位似乎没有帮助。这让我抓狂。有什么建议吗？

出于隐私或其他原因删除了链接

我直接链接到完整页面以显示完整问题。对不起，如果有反对的规则；我是新来的。

另外，它还没有完成，代码真的很草率，所以，你知道的，不要评判。

Answer 1

首先，导航的 HTML 无效。你有 anchor 标签包装列表项。由于 float 元素，您还用负边距做了很多技巧。最好加上 overflow:hidden;到您的 nav ul 并实际将这些元素放回视口(viewport)中。

但是，要快速解决您的问题，您需要清除您的内容，这样它就不会受到导航中正在进行的定位的影响。见下文。

#content {
    clear: left;
}