Question

我创建了一个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>

Answer 1

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

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

这是你的基本结构。尝试从css中删除额外的 ul ，其中有超过2个。

其次，我注意到您正在使用内联表规则。对于旧版本的IE，这些规则经常出现问题，因此请务必对这些类型的规则进行兼容性检查。这是另一篇SO帖子作为参考：

display:inline-table

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

1 个答案: