html - CSS 导航栏背景在设置 float 属性时消失

Question

所以我一直在构建这个 css 导航栏，我有一些问题希望有人能提供帮助.原来是这样Navigation bar .但是在将“.cssmenu ul li”的 float 属性设置为 left 时，整个绿色背景消失了 Navigation with float enabled .为什么会这样？我还使用了 :before 伪类来创建下划线扩展效果，但即使我设置了宽度，它似乎也没有延伸到整个宽度:悬停时为 100%。提前致谢。

因为“jsfiddle.net 的链接必须附有代码”

.cssmenu{
    width : auto;
    background : #27ae60;
}

.cssmenu ul{
  list-style: none;
  margin: 0;
  padding: 0;
  line-height: 1;
  display: block;
  zoom: 1;
}

.cssmenu ul li{
  display: block;
  padding: 0;

}

在 .cssmenu ul li 中启用 float 属性时出现问题。

Answer 1

float 元素的父元素不会扩展到其子元素的大小。把这想象成 children 是 position: absolute。

要强制父元素包含其所有 float 子元素，请将 overflow: hidden 添加到父元素。在您的情况下，您可以将其添加到 .cssmenu:

.cssmenu {
    overflow: hidden;
}

JSFiddle

---

至于下划线，将:before 元素的宽度设置为100% 使下划线与a 元素的宽度相同.这是文本的宽度。

相反，您应该将 :before 元素添加到 li 元素:

.cssmenu ul li:before {
    ...
}

.cssmenu ul li:hover:before {
    ...
}

现在 100% 宽度表示 li 元素的宽度，这是菜单项的“完整”宽度。

注意:您还必须更改 :before 元素的一些指标，例如 top、left等

JSFiddle