Html 子菜单在IE&；中不起作用；铬。。在歌剧院工作_Html_Css_Menu_Submenu

Html 子菜单在IE&；中不起作用；铬。。在歌剧院工作

html css menu

Html 子菜单在IE&；中不起作用；铬。。在歌剧院工作,html,css,menu,submenu,Html,Css,Menu,Submenu,下面是我用HTML编写的代码，我在FF、Opera中完美地得到了我想要的东西。我的朋友也能参加，但我不。。。我也不能看到输出铬。有什么原因吗 <html> <head> <style> #nav, #nav ul { line-height: 1.5em; list-style-position: outside; list-style-type: none; margin: 0; padding: 0; pos

下面是我用HTML编写的代码，我在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>


#导航{
线高：1.5em；
列表样式位置：外部；
列表样式类型：无；
保证金：0；
填充：0；
位置：相对位置；
}
#导航a:链接，#导航a:活动，#导航a:已访问{
背景色：#333333；
边框：1px实心#333333；
颜色：#FFFFFF；
显示：块；
填充：0 5px；
文字装饰：无；
能见度：可见；
}
#导航a：悬停{
背景色：#FFFFFF；
颜色：#333333；
}
#李海军{
位置：相对位置；
宽度：100px；
}
#导航ul{
显示：无；
左：100px；
位置：绝对位置；
宽度：192px；
排名：0；
}
#纳夫利乌拉酒店{
浮动：左；
宽度：192px；
}
#导航ul{
排名：0；
}
#纳夫利乌尔{
左：192px；
顶部：25px；
利润率：0.13px；
}
#导航李尔{
左：192px；
顶部：0px；
利润率：0.13px；
}
#导航李：悬停ul，#导航李：悬停ul，#导航李：悬停ul{
显示：无；
}
#导航李：悬停ul，#导航李：悬停ul，#导航李：悬停ul，#导航李：悬停ul，#导航李：悬停ul{
显示：块；
}

提前感谢…

您的css中有许多重复样式。尽量消除这些。特别是uls有很多规则，这些规则相互覆盖。尝试为uls的不同级别使用类，以使规则更加具体

编辑：

您需要的所有css代码：（）

#导航，#导航ul{
线高：1.5em；
列表样式：无；/*问题的一部分是您没有在HTML中声明doctype。没有声明的doctype会将IE置于怪癖模式，然后它的行为与您期望的不同
您需要将放在文档顶部。

此外，我认为有许多健壮的解决方案可用，比您的解决方案要好一点。正如前面提到的，您声明了许多重复的样式，这可能也会给您带来问题
一个快速的谷歌搜索游戏提供了以下解决方案，效果非常好。

我对代码做了一个快速修改，并将其应用到您的代码中。不确定这是否会完全满足您的要求，但这只是一个开始
<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>


#导航{
保证金：0；
填充：0；
列表样式：无；
线高：1.5em；
}
#李海军{
位置：相对位置；
宽度：100px；
}
/*主级链接*/
#导航a:链接，#导航a:活动，#导航a:已访问{
背景色：#333333；
边框：1px实心#333333；
颜色：#FFFFFF；
显示：块；
填充：0 5px；
文字装饰：无；
能见度：可见；
}
#导航a：悬停{
背景：#ffffff；
颜色：#333333；
}
/*下拉列表*/
#导航李：悬停>ul{
显示：块；
} 
/*二级名单*/
#导航ul{
显示：无；
左：100px；
位置：绝对位置；
宽度：192px；
排名：0；
}
#李国荣{
浮动：无；
保证金：0；
填充：0；
}
/*clearfix*/
#导航：之后{
内容：“.”；
显示：块；
明确：两者皆有；
可见性：隐藏；
线高：0；
身高：0；
}
#导航{
显示：内联块；
} 
html[xmlns]#导航{
显示：块；
}
*html#nav{
身高：1%；
}

希望这能有所帮助！
主要问题是，在IE中，当鼠标滑过cat1
后，cat1
的子菜单没有显示出来……你还试过其他东西吗？如果你还没有答案，我明天会给你发解决方案。用智能手机写lotsa文本很糟糕；）我将解决方案添加到了我的答案中。测试它。尽可能我明白了，您的代码有一些问题。我明天会解释。*
hack是有效的，但只能由IE6解释-由于此下拉菜单在IE6中不起作用，您可以忽略它。html[xmlns]
是用于xhtml的-因为您使用html5 doctype，所以它是无用的。通过#nav:after
的clearfix在IE 7中不起作用。a选择器中的可见性是不必要的。
<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>