因此,我一直在构建此CSS导航栏,我遇到了一些问题,希望有人可以提供帮助
。这就是Navigation bar的样子。但是在将“ .cssmenu ul li”的float属性设置为保留整个绿色背景时,Navigation with float enabled消失了。为什么会这样?我还使用了:before伪类来创建下划线扩展效果,但是即使我将width设置为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属性时,事情变得一团糟。

最佳答案

浮动元素的父元素不会扩展到其子元素的大小。认为这就像孩子们position: absolute

要强制父元素包含其所有浮动子元素,请将overflow: hidden添加到父元素。对于您的情况,您可以将其添加到.cssmenu

.cssmenu {
    overflow: hidden;
}


JSFiddle



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

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

.cssmenu ul li:before {
    ...
}

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


现在100%width表示li元素的宽度,即菜单项的“完整”宽度。

注意:您还必须更改:before元素的某些度量标准,例如topleft等。

JSFiddle

关于html - CSS导航栏背景在设置float属性时消失,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/24065824/

10-14 15:21
查看更多