1

我很好奇是否有任何方法可以仅使用 css 来纠正这种行为......

请注意，当您将鼠标悬停在菜单右侧的空白处时，会导致菜单项模糊。如果您将鼠标悬停在菜单左侧的空白处，它不会模糊菜单项。

我确信 #centeredmenu ul 规则的 float: left 会导致这种模糊。当您将鼠标悬停在右侧的空白处时，我想停止模糊，但此规则对于使菜单居中是必要的。

我正在尝试更正此页面： http: //www.soaringbirdstudios.com/help

正如您在萤火虫中看到的那样，我尝试在 centermenu div 下方添加另一个 div，其风格为 clear both 并将两个 div 都包含在一个封闭的 div 中，但这没有用。我只是没有足够的经验来解决这个问题。

谢谢。

4

1 回答 1

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;
}
于 2013-05-15T22:35:38.790 回答