因此,我一直在构建此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
元素的某些度量标准,例如top
,left
等。JSFiddle
关于html - CSS导航栏背景在设置float属性时消失,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/24065824/