Internet Explorer中的CSS悬停下拉菜单

试图创建一个在Internet Explorer中看起来像在Firefox中一样好的网站是一项难以置信的艰巨任务。但是，IE中至少有一个错误对我们的团队来说尤其令人困惑。 Firefox和Chrome中的下拉菜单显示效果良好，但在资源管理器中看起来完全不起作用。Internet Explorer中的CSS悬停下拉菜单

此图显示了分别在Firefox和资源管理器中浏览时菜单的外观。请点击链接查看图片。

http://i1025.photobucket.com/albums/y315/brycewwilson/firefox-explorerscreenshot.png

请帮帮忙！有没有其他人遇到这个问题，而尝试使用CSS格式的菜单？该菜单使用无序列表和列表项目，并使用CSS悬停来显示子菜单内容。

在此先感谢！

更新：出于某种原因，该菜单在IE中独立运行，但它仍然无法在我们的网站上运行。令人费解...

这是代码。

的HTML如下：

<head> 
<link rel="stylesheet" type="text/css" href="old_hover_menu.css"/> 
</head> 
<body> 
<ul id="topDropDownMenu"> 
<li id="aboutDropDown"><a href="#">About</a> 
</li> 
<li id="contactDropDown"><a href="#">Contact</a> 
<ul> 
<li><a href="#">Form</a></li> 
<li><a href="#">Information</a></li> 
</ul> 
</li> 
</ul> 
</body>

这里是CSS：

#topDropDownMenu {position:relative;background: no-repeat 100% 50%;width:50em;max-width:100%;float:left;} 

#topDropDownMenu li ul { 
    width:11em !important;/* leaves room for padding */ 
    cursor:default; 
    position:absolute; 
    height:auto; 
    display:none; 
    left:-10px; 
    padding:1px 10px 10px 10px; 
    background:url(/img/clear.gif); 
} 
/* All LIs */ 
#topDropDownMenu li { 
    position:relative; 
    width:8.3em; 
    max-width:16.5%; 
    cursor:pointer; 
    float:left; 
    list-style-type:none; 
    font-weight:bold; 
     border-style:solid; 
     border-width:1px; 
    border-color:#222; 
    text-align:center; 
     -moz-border-radius:8px 8px 0px 0px; 
} 
/* sub-menu LIs */ 
#topDropDownMenu li ul li { 
    width:8.3em/*FF*/; 
    padding:0; 
    border:none; 
    max-width:100%; 
    border:1px solid #333; 
    border-top:none; 
     -moz-border-radius:0px 0px 0px 0px; 
} 
/* All anchors */ 
#topDropDownMenu li a { 
    cursor:pointer !important; 
    color:#666; 
    text-decoration:none; 
    display:block; 
    float:left; 
    height:2em; 
    line-height:2em; 
    width:100%; 
     -moz-border-radius:8px 8px 0px 0px; 
} 
/* sub-menu Anchors */ 
#topDropDownMenu li ul li a { 
    width:8.3em/*FF*/; 
    position:relative !important; 
    cursor:pointer !important; 
    white-space:nowrap; 
    line-height:1.7em; 
    height:1.7em; 
    font-weight:normal; 
    color:#666; 
    background-position:0 50% !important; 
     -moz-border-radius:0px 0px 0px 0px; 
} 
/*hover*/ 
#topDropDownMenu li a:hover, 
#topDropDownMenu li a:focus, 
#topDropDownMenu li a:active {color:#000;background:#fff} 
/* display and z-index for the sub-menus */ 
#topDropDownMenu li:hover ul, 
#topDropDownMenu li.msieFix ul {display:block;z-index:10;top:2em !important;} 
#topDropDownMenu li#aboutDropDown {z-index:2;} 
#topDropDownMenu li#contactDropDown {z-index:1;} 

.aboutDropDown #topDropDownMenu li#aboutDropDown ul, 
.contactDropDown #topDropDownMenu li#contactDropDown ul { display:block;top:-1000px} 
#aboutDropDown a {background-color:#b9e075;} 
#contactDropDown a {background-color:#f7c472;} 

#topDropDownMenu li.msieFix a {} 

.aboutDropDown #topDropDownMenu li#aboutDropDown ul li a:focus, 
.aboutDropDown #topDropDownMenu li#aboutDropDown ul li a:active, 
.contactDropDown #topDropDownMenu li#contactDropDown ul li a:focus, 
.contactDropDown #topDropDownMenu li#contactDropDown ul li a:active, 
{position:absolute !important;top:1028px !important;}

来源

2010-08-27 user432586

欢迎来到网页开发，IE将很快成为你生活的祸根。另外，如果我们能够提供帮助，一些CSS和HTML将会很有帮助。 – Konrad 2010-08-27 16:54:48

请给我们提供一些我们可以调试的代码。仅仅从截图中我们可能无法帮助你。 – 2ndkauboy 2010-08-27 16:55:46

这才勉强算作一个答案，但它可能会有所帮助。

当您使用完全自定义的解决方案时，跨浏览器兼容性可能有点像这样的事情的怪物。这是一个使用像jQuery UI这样的库的例子，它可以让你更轻松，因为它们通常都是跨浏览器兼容的。

如果这不是一个选项，在没有看到您的代码的情况下将无法提供帮助。你使用什么版本的Internet Explorer？

来源

2010-08-27 16:55:54 jdc0589

没有看到一些HTML和CSS，没有办法给你一个特定的解决方案。但是，有一些技术可以用来帮助缓解IE漏洞。

浮动您的<li> s，即使它们不是水平的。
将display: inline添加到现在漂浮的<li> s。
指定一个width到您的<li>或<a>标签内。
可能将position: relative添加到<li> s。
将display: block添加到<li>中的<a>标签。
将width: 100%或zoom: 1（或触发hasLayout的其他任何内容）添加到顶层<ul>。

上面的一些技巧通常会让你处于更好的位置。进一步的调整可能是必要的，但希望IE会表现得更好。

来源

2010-08-27 16:58:41 CalebD

谢谢！如果你们都不介意看看它的话，那么这段代码就要起来了。 – user432586 2010-08-30 14:26:33

也添加在一个DOCTYPE帮助修复[我与IE有问题]（http://stackoverflow.com/questions/8658186/ie-css-border-missing-when-using-displaynone） – icc97 2011-12-28 20:54:08

我喜欢自己编码一切，但HTML/CSS/JS导航是其中一个你不需要重新发明轮子的领域之一。无论你想要什么样子，都有很多准备好去解决问题的方法，这些解决方案已经通过了浏览器的测试。 Suckerfish是一个纯粹的html/css解决方案的流行之一，但还有很多工作将会很好，并且可以很容易地按照你想要的样式进行设计。（只要确保样式正确的元素）

来源

2010-08-27 17:52:03

<!doctype html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title>Untitled Document</title> 
    <style> 
     #topDropDownMenu { 
      position: relative; 
      background: no-repeat 100% 50%; 
      width: 50em; 
      max-width: 100%; 
      float: left; 
     } 

      #topDropDownMenu li ul { 
       width: 11em !important; /* leaves room for padding */ 
       cursor: default; 
       position: absolute; 
       height: auto; 
       display: none; 
       left: -10px; 
       padding: 1px 10px 10px 10px; 
       background: url(/img/clear.gif); 
      } 
      /* All LIs */ 

      #topDropDownMenu li { 
       position: relative; 
       width: 8.3em; 
       max-width: 16.5%; 
       cursor: pointer; 
       float: left; 
       list-style-type: none; 
       font-weight: bold; 
       border-style: solid; 
       border-width: 1px; 
       border-color: #222; 
       text-align: center; 
       -moz-border-radius: 8px 8px 0px 0px; 
      } 
       /* sub-menu LIs */ 

       #topDropDownMenu li ul li { 
        width: 8.3em /*FF*/; 
        padding: 0; 
        border: none; 
        max-width: 100%; 
        border: 1px solid #333; 
        border-top: none; 
        -moz-border-radius: 0px 0px 0px 0px; 
       } 
       /* All anchors */ 

       #topDropDownMenu li a { 
        cursor: pointer !important; 
        color: #666; 
        text-decoration: none; 
        display: block; 
        float: left; 
        height: 2em; 
        line-height: 2em; 
        width: 100%; 
        -moz-border-radius: 8px 8px 0px 0px; 
       } 
       /* sub-menu Anchors */ 

       #topDropDownMenu li ul li a { 
        width: 8.3em /*FF*/; 
        position: relative !important; 
        cursor: pointer !important; 
        white-space: nowrap; 
        line-height: 1.7em; 
        height: 1.7em; 
        font-weight: normal; 
        color: #666; 
        background-position: 0 50% !important; 
        -moz-border-radius: 0px 0px 0px 0px; 
       } 
       /*hover*/ 

       #topDropDownMenu li a:hover, #topDropDownMenu li a:focus, #topDropDownMenu li a:active { 
        color: #000; 
        background: #fff; 
       } 
       /* display and z-index for the sub-menus */ 

       #topDropDownMenu li:hover ul, #topDropDownMenu li.msieFix ul { 
        display: block; 
        z-index: 10; 
        top: 2em !important; 
       } 

       #topDropDownMenu li#aboutDropDown { 
        z-index: 2; 
       } 

       #topDropDownMenu li#contactDropDown { 
        z-index: 1; 
       } 

     .aboutDropDown #topDropDownMenu li#aboutDropDown ul, .contactDropDown #topDropDownMenu li#contactDropDown ul { 
      display: block; 
      top: -1000px; 
     } 

     #aboutDropDown a { 
      background-color: #b9e075; 
     } 

     #contactDropDown a { 
      background-color: #f7c472; 
     } 

     #topDropDownMenu li.msieFix a { 
     } 

     .aboutDropDown #topDropDownMenu li#aboutDropDown ul li a:focus, .aboutDropDown #topDropDownMenu li#aboutDropDown ul li a:active, .contactDropDown #topDropDownMenu li#contactDropDown ul li a:focus, .contactDropDown #topDropDownMenu li#contactDropDown ul li a:active, { 
      position: absolute !important; 
      top: 1028px !important; 
     } 
    </style> 
    <link rel="stylesheet" type="text/css" href="old_hover_menu.css" /> 
</head> 
<body> 
    <ul id="topDropDownMenu"> 
     <li id="aboutDropDown"><a href="#">About</a></li> 
     <li id="contactDropDown"><a href="#">Contact</a><ul> 
      <li><a href="#">Form</a></li> 
      <li><a href="#">Information</a></li> 
     </ul> 
     </li> 
    </ul> 
</body> 
</body></html>

来源

2013-10-15 06:43:16 doowan

嗨doowan，你可能会考虑改进你的答案的格式。你可以在[沙箱]（http://meta.stackexchange.com/questions/3122/formatting-sandbox?lq=1） – bummi 2013-10-15 06:56:30

测试格式不知道为什么它显示为这样.. – doowan 2013-10-15 07:02:08

固定他/她的菜单虽然 – doowan 2013-10-15 07:02:29

Internet Explorer中的CSS悬停下拉菜单

回答

相关问题