子菜单不工作在IE浏览器和Chrome ..在FF工作，Opera

下面是我写在HTML中的代码，我得到了我想要的完美的FF，Opera。我的朋友也能够在IE中运行，但我不是......另外我无法看到输出Chrome。任何原因？？子菜单不工作在IE浏览器和Chrome ..在FF工作，Opera

<html> 
<head> 
<style> 
#nav, #nav ul { 
    line-height: 1.5em; 
    list-style-position: outside; 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    position: relative; 
} 

#nav a:link, #nav a:active, #nav a:visited { 
    background-color: #333333; 
    border: 1px solid #333333; 
    color: #FFFFFF; 
    display: block; 
    padding: 0 5px; 
    text-decoration: none; 
    visibility: visible; 
} 

#nav a:hover { 
    background-color: #FFFFFF; 
    color: #333333; 
} 
#nav li { 
    position: relative; 
    width: 100px; 
} 

#nav ul { 
    display: none; 
    left: 100px; 
    position: absolute; 
    width: 192px; 
    top:0; 
} 

#nav li ul a { 
    float: left; 
    width: 192px; 
} 

#nav ul ul { 
    top:0; 
} 

#nav li ul ul { 
    left: 192px; 
    top:25px; 
    margin: 0 0 0 13px; 
} 

#nav li ul ul ul { 
    left: 192px; 
    top:0px; 
    margin: 0 0 0 13px; 
} 


#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul{ 
    display: none; 
} 
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul { 
    display: block; 
} 
</style> 
</head> 
<body> 
<ul id="nav"> 
<li><a href="#">cat1</a><ul class="jaccordion"> 
<li><a href="#">cat1.1</a><ul class="jaccordion"></ul></li> 
<li><a href="#">cat1.2</a><ul class="jaccordion"> 
<li><a href="#">cat1.2.1</a><ul class="jaccordion"> 
<li><a href="#">cat1.2.1.1</a><ul class="jaccordion"></ul></li></ul></li></ul></li> 
<li><a href="#">cat1.3</a><ul class="jaccordion"></ul></li> 
</ul></li> 
<li><a href="#">cat2</a><ul class="jaccordion"> 
<li><a href="#">cat2.1</a><ul class="jaccordion"></ul></li></ul></li> 
</ul> 
</body> 
</html>

在此先感谢...

来源

2012-02-04 Fahim Parkar

你还尝试过其他什么吗？如果你还没有答案，我会在明天发布解决方案。用智能手机写作lota文本很烂;） – Christoph 2012-02-05 20:54:40

我添加了解决方案我的答案。测试一下。 – Christoph 2012-02-06 08:27:35

感谢克里斯托弗 – 2012-02-06 08:47:20

你在你的CSS了很多重复的样式。尝试消除这些。特别是你有很多规则可以互相重叠。尝试使用不同层次的类来制定更具体的规则。

编辑：

你需要的所有的CSS代码：（test it）

#nav, #nav ul { 
    line-height: 1.5em; 
    list-style:none; /* <- shorthand declaration is enough */ 
    margin: 0; 
    padding: 0; 
    position: relative; 
} 

#nav a:link, #nav a:active, #nav a:visited { 
    background-color: #333333; 
    border: 1px solid #333333; 
    color: #FFFFFF; 
    display: block; 
    padding: 0 5px; 
    text-decoration: none; 
} 

#nav a:hover { 
    background-color: #FFFFFF; 
    color: #333333; 
} 
#nav li { 
    position: relative; 
    width: 80px;  /* <- This defines the width, no need to declare elsewhere */ 
} 

#nav ul { 
    display: none; 
    left: 100%;  /* <- % makes you indepentent of declared with in li*/ 
    position: absolute; 
    top:0; 
} 

#nav li:hover > ul{ 
    display:block; /* <- does all the hovermagic for you, no matter how many ul-levels you have */ 
}

有以下几个原因，该代码不会在IE 6中工作（如果你需要支持它，你需要一些真正讨厌的解决方法）

来源

2012-02-04 19:30:07 Christoph

主要问题是IE在鼠标移过'cat 1'之后，'cat1'的子菜单没有显示出来...... – 2012-02-05 03:29:17

感谢大家的帮助:) – 2012-02-06 08:46:53

问题的一部分是，您尚未在HTML中声明doctype。没有声明的doctype会将IE放入quirksmode，然后它的行为与你期望的不同。

您将要将<!DOCTYPE html>置于文档的顶部。 Quirksmode Explanation

此外，我认为有很多强大的解决方案可用，会比你更好一点。如前所述，您声明了许多重复样式，这可能也会导致您遇到问题。

一个快速的谷歌搜索游戏与以下解决方案，它工作得很好。 CSS3 Dropdown Menu

我做了一个代码的快速修改，并将其应用到你的。不知道这是否会完全符合你的要求，但这是一个开始。

<style> 

#nav { 
margin: 0; 
padding: 0; 
list-style: none; 
line-height: 1.5em; 
} 

#nav li { 
    position: relative; 
    width: 100px; 
} 

/* main level link */ 
#nav a:link, #nav a:active, #nav a:visited { 
    background-color: #333333; 
    border: 1px solid #333333; 
    color: #FFFFFF; 
    display: block; 
    padding: 0 5px; 
    text-decoration: none; 
    visibility: visible; 
} 

#nav a:hover { 
    background: #ffffff; 
    color: #333333; 
} 

/* dropdown */ 
#nav li:hover > ul { 
display: block; 
} 

/* level 2 list */ 
#nav ul { 
    display: none; 
    left: 100px; 
    position: absolute; 
    width: 192px; 
    top: 0; 
} 

#nav ul li { 
float: none; 
margin: 0; 
padding: 0; 
} 

/* clearfix */ 
#nav:after { 
    content: "."; 
    display: block; 
    clear: both; 
    visibility: hidden; 
    line-height: 0; 
    height: 0; 
} 

#nav { 
    display: inline-block; 
} 

html[xmlns] #nav { 
display: block; 
} 

* html #nav { 
    height: 1%; 
} 
</style>

希望有所帮助！

来源

2012-02-05 19:42:29 plumwd

据我所见，你的代码有一些问题。我明天再解释一下。 – Christoph 2012-02-05 20:58:58

'*'破解是有效的，但只能由IE6解释 - 因为这个下拉菜单不会在IE6中工作，您可以省略它。 'html [xmlns]'用于xhtml - 因为您使用html5文档类型，所以它没用。 clearfix通过'#nav：after'在IE 7中不起作用。 a选择器中的'visibility'是不必要的。 – Christoph 2012-02-06 08:40:25

子菜单不工作在IE浏览器和Chrome ..在FF工作，Opera

回答

相关问题