下拉 CSS 和 HTML 导航菜单在 IE6 - IE8 中不起作用答案

【问题标题】：Dropdown CSS and HTML Navigation Menu doesn't work in IE6 - IE8下拉 CSS 和 HTML 导航菜单在 IE6 - IE8 中不起作用
【发布时间】：2014-01-29 02:15:05
【问题描述】：

我创建了一个 CSS 和 HTML 导航菜单，它适用于除 IE6 - IE8 之外的所有浏览器。我怎样才能使这项工作？我试图使我的 css 和 html 尽可能小以帮助提高兼容性，但无济于事。

CSS 和 HTML

ul ul {
  display: none;
}
ul li:hover > ul {

  display: block;
}
ul {
  background-color: #99CCFF; 
  background-color: rgb(153, 204, 255);
  list-style-type: none;
  position: relative;
  display: inline-table;
  font-family: 'Julius Sans One', sans-serif;
}
ul:after {
  content: ""; clear: both; display: block;
}
ul li {
  float: left;
  display:none;
}
ul li:hover {
  background: #6699CC;
}
ul li:hover a {
  color: #000000;
}
ul li a {
  display: block; padding: 25px 40px;
  color: #000000; text-decoration: none;
}
ul ul {
  background: #99CCFF; padding: 0;
  position: absolute; top: 100%;
}
ul ul li {
  display:inline;
  float: none; 
  border-top: 0px solid #6b727c;
  border-bottom: 0px solid #575f6a;
  position: relative;
}
ul ul li a {
  padding: 15px 40px;
  color: #000000;	
}	
ul ul li a:hover {
  background: #6699CC;
}
ul ul ul {
  position: absolute; left: 100%; top:0;

}

<ul id="nav">
  <li><a href="#">Contact Us</a>
    <ul>
      <li><a href="address.html">Address</a></li>
      <li><a href="rentals.html">Rentals</a></li>
      <li><a href="phonenumbers.html">Phone Numbers</a></li>
    </ul>
  </li>
  <li><a href="#">Mass</a>
    <ul>
      <li><a href="http://www.usccb.org/nab/today.shtml" target="_blank">Readings</a></li>
      <li><a href="bulletins.html">Bulletins</a></li>
      <li><a href="http://www.vatican.va/archive/ccc_css/archive/catechism/ccc_toc.htm"  target="_blank">Catechism</a></li>
      <li><a href="http://www.archindy.org/" target="_blank">Archdiocese of<br>Indiana</a></li>
      <li><a href="confessions.html">Confession</a></li>
      <li><a href="dailymass.html">Mass Schedule</a></li>
    </ul>
  </li>
  <li><a href="#">Ministries</a>
    <ul>
      <li><a href="school.html">Pre-School</a></li>
      <li><a href="daycare.html">Day Care</a></li>
      <li><a href="ccd.html">CCD</a></li>
      <li><a href="http://www.gandouministry.com/" target="_blank">Haiti<br>Ministry</a></li>
    </ul>
  </li>
  <li><a href="#">Info</a>
    <ul>
      <li><a href="park.html">Walking<br>Park</a></li>
      <li><a href="councils.html">Councils &<br>Committees</a></li>
      <li><a href="cemetery.html">Cemetery Rules</a></li>
      <li><a href="bulletins.html">Bulletins</a></li>
      <li><a href="http://www.vatican.va/archive/ccc_css/archive/catechism/ccc_toc.htm"  target="_blank">Catechism</a></li>
    </ul>
  <li><a href="#">Activities</a>
    <ul>
      <li><a href="laborday.html">Labor Day<br>Festival</a></li>
      <li><a href="bingo.html">Bingo</a></li>
      <li><a href="drawdon.html">Drawdown</a></li>
      <li><a href="fund.html">MSGR Schmitz<br>Memorial Fund</a></li>
    </ul>
  </li>
</ul>

【问题讨论】：

好吧，首先，> isn't supported by IE6 我建议放弃对它们的支持。如果你真的关心 IE 用户，就不要做一个纯 CSS 的下拉菜单。你需要 JS。
您提供的代码甚至在任何浏览器中都不起作用...jsfiddle

标签： html css internet-explorer nav

【解决方案1】：

您的 css 规则中似乎有太多前面的 ul 选择器。

<ul>
    <li>
        <ul> </ul>
    </li>
<ul>

这是你的基本结构。尝试从其中超过 2 个的 css 中删除多余的 ul。

其次，我注意到您正在使用 inline-table 规则。像这样的规则在旧版本的 IE 中经常会出现问题，所以一定要对这些类型的规则进行兼容性检查。这是另一个 SO 帖子作为对此的参考：

display:inline-table

【讨论】：