我创建了一个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>
答案 0 :(得分:0)
您的css规则中似乎有太多前 ul 选择器。
<ul>
<li>
<ul> </ul>
</li>
<ul>
这是你的基本结构。尝试从css中删除额外的 ul ,其中有超过2个。
其次,我注意到您正在使用内联表规则。对于旧版本的IE,这些规则经常出现问题,因此请务必对这些类型的规则进行兼容性检查。这是另一篇SO帖子作为参考: