CSS下拉式菜单中的IE 7

这里不工作是样品点：CSS下拉式菜单中的IE 7

http://tronitech.brettatkin.com/solutions.asp

在IE 7中，下拉菜单是不正确（真的不是全部）工作。在悬停做显示，但这是关于它。

这是我第一次尝试通过创建CSS仅下拉菜单，所以我欢迎所有关于代码的反馈和批评。

感谢

布雷特

来源

2011-06-29 Brett

这是我的CSS文件：http://tronitech.brettatkin.com/inc/styles.css – Brett

一个修复程序是很容易的：

论styles.css 266行：

#nav ul li { 
    float: left; 
    position: relative; 
}

变化：#nav ul li到#nav > ul > li。问题已修复。

也就是说，用直接child combinators（>）替换descendant combinators（空间：）。这可以防止子菜单中的li出现问题float: left，同时仍允许起始li保留float: left。

来源

2011-06-29 15:32:01 thirtydot

是的，它修复了它！这是什么意思？ – Brett

我刚给我的答案加了一个解释。 – thirtydot

解决这样的问题，通常要求CSS和相应的代码 - 如果JS用来添加一个类，例如 - 与你的问题一并公布。我猜想，在开始时，菜单中的大小（边距，填充或高度变化）存在问题。看起来像悬停在第一个子菜单项上时，剩下的<li>项目被碰撞。浮球看起来很明显，而且由于第二个项目向右跳，这就是我的猜测。我没有看到任何课程变更，您的CSS是否严格依赖悬停？

来源

2011-06-29 15:27:47 Lazer

是的，CSS只悬停。我不明白“浮动看起来很明显”的说法。 – Brett

您在此css #nav ul li中设置了float: left;，它也影响子列表。

您需要在CSS #nav ul li:hover ul li

或

做的修改添加float:none;：#nav ul li到#nav > ul > li在他的回答中提到thirtydot。

来源

2011-06-29 15:34:59

看到它在这里工作：http://jsfiddle.net/AgdGs/19/ –

你的修复也可以，而且也很简单。虽然，它似乎更好地使用'#nav ul li li li {float：none}'*（删除'：hover'）* – thirtydot

是的，谢谢@ thirtydot –

CSS下拉式菜单中的IE 7

回答

相关问题