Dropdown CSS and HTML Navigation Menu doesn't work in IE6 - IE8

Question

I have created a CSS and HTML navigation menu that works in all browsers except IE6 - IE8. How can I make this work? I've attempted to make my css and html as small as possible to help with the compatibility but to no avail.

CSS and 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

Looks like you have too many preceding ul selectors in your css rules.

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

That is your basic structure. Try removing the extra ul from the css where there are more than 2 of them.

Second, I notice you're using an inline-table rule. Rules like these are often trouble with older versions of IE, so make sure to do a compatibility check on these types of rules. Here's another SO post as a reference to this:

display:inline-table