我很好奇是否有任何方法可以使用css来纠正这种行为......
请注意,当您将鼠标悬停在菜单右侧的空白处时,会导致菜单项的模糊。如果将鼠标悬停在菜单左侧的空白处,则不会模糊菜单项。
我确信#centeredmenu ul规则的float:左边会导致这种模糊。当您将鼠标悬停在右侧的空白区域时,我想停止模糊,但是这个规则对于使菜单居中是必要的。
我正在尝试更正此页面:http://www.soaringbirdstudios.com/help
正如你在firebug中看到的那样,我试图在centermenu div下面添加另一个div,其风格清晰,并且在一个封闭的div中包含两个div但是没有用。我只是没有足够的经验来解决这个问题。
感谢。
答案 0 :(得分:0)
不确定它是否能帮助您找到所需的解决方案,但如果您想要摆脱浮动,则可以执行以下操作:
变化:
.bmenu li {
display:inline-block;
/*float: left;*/ <-- can delete or comment out
list-style: none;
padding: 0;
position: relative;
/*right: 50%;*/ <-- can delete or comment out
margin: 100px 0 0;
font-size: 50px;
vertical-align:top; <--- added for making it pretty
}
继续向下进行以下更改以完全摆脱浮动:
delete <div style="clear:both;"></div>
#centeredmenu ul {
/*clear: left;*/ <-- can delete or comment out
/*float: left;*/ <-- can delete or comment out
list-style: none;
margin: 0;
padding: 0;
position: relative;
/*left: 50%;*/ <-- can delete or comment out
text-align: center;
}
#centeredmenu {
/*float: left;*/ <-- can delete or comment out
width: 100%;
overflow: hidden;
position: relative;
}