views:

59

answers:

1

i have this code for a CSS Menu... i got it generated by using a CSS Menu Generator tool ... its not working with IE6... what to do...

alt text

HTML is here

<table border="0" cellpadding="0" cellspacing="0" height="30">
<tr>
    <td>
    <div class="mainmenu">
    <ul>
          <li class="li_nc"><a href="/" target="_self" >HOME</a></li>
          <li class="li_hc"><a href="#"  >PROGRAMS</a><ul class="ul_ch">
             <li class="li_hc"><a href="#"  >Engineering</a><ul class="ul_ch">
                <li class="li_nc"><a href="#"  >BEE ( Electronics 4 Years )</a></li>
                <li class="li_nc"><a href="#"  >BEE ( Tele Comm. 4 Years )</a></li>
                <li class="li_nc"><a href="#"  >BSE ( Software 4 Years )</a></li>
                <li class="li_nc"><a href="#"  >BCE (Computer 4 Years)</a></li>
             </ul></li>
             <li class="li_hc"><a href="#"  >Management Sciences</a><ul class="ul_ch">
                <li class="li_nc"><a href="#"  >BBA ( Years )</a></li>
                <li class="li_nc"><a href="#"  >MBA ( 3 Years )</a></li>
                <li class="li_nc"><a href="#"  >MBA ( 2 1/2 Years )</a></li>
                <li class="li_nc"><a href="#"  >MBA ( 1 1/2 Years )</a></li>
                <li class="li_nc"><a href="#"  >MBA ( Weekend )</a></li>
                <li class="li_nc"><a href="#"  >MBA ( Pharma )</a></li>
                <li class="li_nc"><a href="#"  >Ph.D Management</a></li>
             </ul></li>
             <li class="li_hc"><a href="#"  >Earth & Environmental Sciences</a><ul class="ul_ch">
                <li class="li_nc"><a href="#"  >BS ( Geology\Geophysics )</a></li>
                <li class="li_nc"><a href="#"  >MS  ( Geology\Geophysics )</a></li>
                <li class="li_nc"><a href="#"  >MS ( Environmental Policy & Management )</a></li>
                <li class="li_nc"><a href="#"  >MS & Ph.D ( Environmental )</a></li>
             </ul></li>
             <li class="li_hc"><a href="#"  >Professional Psychology</a><ul class="ul_ch">
                <li class="li_nc"><a href="#"  >BS ( 4 Years )</a></li>
                <li class="li_nc"><a href="#"  >PMD ( 1 Year )</a></li>
                <li class="li_nc"><a href="#"  >M. Phil ( 1-2 Years )</a></li>
                <li class="li_nc"><a href="#"  >Ph.D ( 2-3 Years )</a></li>
             </ul></li>
             <li class="li_hc"><a href="#"  >Marine & Maritime Sciences</a><ul class="ul_ch">
                <li class="li_nc"><a href="#"  >MBA ( 1-5 Years )</a></li>
                <li class="li_nc"><a href="#"  >MBA ( Maritime 2-5 Years )</a></li>
                <li class="li_nc"><a href="#"  >MBA ( Maritime 3 Years )</a></li>
                <li class="li_nc"><a href="#"  >MSC ( Geophysics 2 Years )</a></li>
             </ul></li>
             <li class="li_nc"><a href="#"  >Graduate & Applie Sciences</a></li>
             <li class="li_hc"><a href="#"  >Humanities & Social Sciences</a><ul class="ul_ch">
                <li class="li_nc"><a href="#"  >BSS ( 4 Years )</a></li>
             </ul></li>
             <li class="li_hc"><a href="#"  >Medical & Dental Sciences</a><ul class="ul_ch">
                <li class="li_nc"><a href="#"  >MBBS ( 5 Years )</a></li>
             </ul></li>
             <li class="li_hc"><a href="#"  >Legal Studies</a><ul class="ul_ch">
                <li class="li_nc"><a href="#"  >LLB ( 5 Years )</a></li>
             </ul></li>
          </ul></li>
          <li class="li_hc"><a href="#"  >ADMISSIONS</a><ul class="ul_ch">
             <li class="li_nc"><a href="#"  >General Info</a></li>
             <li class="li_nc"><a href="#"  >Eligibility</a></li>
             <li class="li_nc"><a href="#"  >Admissions Procedure</a></li>
             <li class="li_nc"><a href="#"  >Freshmen Orientation</a></li>
             <li class="li_nc"><a href="#"  >How To Apply ?</a></li>
             <li class="li_nc"><a href="#"  >Prospectus</a></li>
          </ul></li>
          <li class="li_hc"><a href="#"  >ACADEMICS</a><ul class="ul_ch">
             <li class="li_nc"><a href="#"  >Semester System</a></li>
             <li class="li_nc"><a href="#"  >Examination System</a></li>
             <li class="li_nc"><a href="#"  >Course\Syllabus</a></li>
             <li class="li_nc"><a href="#"  >Faculty Evaluation</a></li>
             <li class="li_nc"><a href="#"  >Rules & Regulations</a></li>
             <li class="li_nc"><a href="#"  >Degree Recognition</a></li>
          </ul></li>
          <li class="li_hc"><a href="#"  >FACILITIES</a><ul class="ul_ch">
             <li class="li_nc"><a href="#"  >Student Support Facilities</a></li>
             <li class="li_nc"><a href="#"  >Laboratories</a></li>
             <li class="li_nc"><a href="#"  >Computer Laboratories</a></li>
             <li class="li_nc"><a href="#"  >Audio & Visual Facilities</a></li>
             <li class="li_nc"><a href="#"  >Medical Services</a></li>
             <li class="li_nc"><a href="#"  >Security Services</a></li>
             <li class="li_nc"><a href="#"  >Sports Facilities</a></li>
             <li class="li_nc"><a href="#"  >Study & Excursion Trips</a></li>
             <li class="li_nc"><a href="#"  >Cafeterias & Dinning</a></li>
          </ul></li>
          <li class="li_hc"><a href="#"  >FACULTY</a><ul class="ul_ch">
             <li class="li_nc"><a href="#"  >Islamabad Campus</a></li>
             <li class="li_nc"><a href="#"  >Karachi Campus</a></li>
          </ul></li>
          <li class="li_hc"><a href="#"  >ABOUT</a><ul class="ul_ch">
             <li class="li_nc"><a href="#"  >History</a></li>
             <li class="li_nc"><a href="#"  >Board Of Governers</a></li>
             <li class="li_nc"><a href="#"  >Constituent Units</a></li>
             <li class="li_nc"><a href="#"  >Affiliated Units</a></li>
          </ul></li>
          <li class="li_nc"><a href="#"  >CONTACT US</a></li>
          <li class="li_nc"><a href="#"  >VIRTUAL TOUR</a></li>
    </ul>
    </div>
    </td>
</tr>
</table>

here is the CSS

/* pull-down mainmenu css */
.mainmenu{
    float  : left;
    width  : 100%;
    height : 30;
    padding: 0;

    margin-bottom:0;
    margin-top:0;
    margin-left:0;
    margin-right:0;
    border-width:0;

}
.mainmenu ul {
    float: left;
    width: 100%;
    list-style: none;
    line-height: 1;
    color:#e0e0e0;
    background: #474747;
    padding: 0;
    border: solid transparent;
    border-width: 1px 0;
    margin: 0 0 1em 0;
}

.mainmenu a, .mainmenu a:visited 
{
    display: block;
    font-family:calibri;
    font-size:13px;
    font-weight:normal;
    font-style:normal;
    text-decoration:underline;
    color: #e0e0e0;
    text-decoration: none;
    padding: 1em 1em;
}

.mainmenu ul ul a{
    width:100%;
    height:100%;
}
.mainmenu ul a{
    width:1%;
}


.mainmenu li  {
    float: left;
    margin:0;
    padding:0;
}

.mainmenu ul li 
{
 float:left; position:relative;  
}

.mainmenu ul li a 
{
 white-space:nowrap;
}

.mainmenu li ul {
    position: absolute;
    left: -999em;
    height: auto;
    width:15em; 

    background: #474747;
    font-weight: normal;
    border-width: 1px;
    margin: 0;
}

.mainmenu li li {
    width:15em ;
}

.mainmenu li li a{
    width:13em ;
}

.mainmenu li ul  {
    margin: 0;
}
.mainmenu li ul ul {
    margin: -2.8em 0 0 13.5em;
}
.ul_ch, 
.mainmenu li:hover ul ul,
.mainmenu li li:hover ul ul,
.mainmenu li li li:hover ul ul,
.mainmenu li li li li:hover ul ul,
.mainmenu li li li li li:hover ul ul
{
    left: -999em;
}
.mainmenu li:hover ul,
.mainmenu li li:hover ul,
.mainmenu li li li:hover ul,
.mainmenu li li li li:hover ul,
.mainmenu li li li li li:hover ul
{
    left: auto;
}
.mainmenu li:hover>ul.ul_ch   
{
    left: auto;
}

.mainmenu li:hover{
    background: #0552a7;
}

.mainmenu li:hover a,.mainmenu li:hover a:visited,.mainmenu li:hover a:hover,.mainmenu li a:hover{
    color:#e0e0e0;
}
.mainmenu li:hover li a, .mainmenu li li:hover li a, 
.mainmenu li li li:hover li a, .mainmenu li li li li:hover li a,
.mainmenu li:hover li a:visited, .mainmenu li li:hover li a:visited, 
.mainmenu li li li:hover li a:visited, .mainmenu li li li li:hover li a:visited
{
    color:#e0e0e0;
}
.mainmenu li li:hover, .mainmenu li li li:hover, 
.mainmenu li li li li:hover , .mainmenu li li li li li:hover , .mainmenu li li li li li li:hover 
{
    background: #0552a7;
    z-index:9999;
}
.mainmenu li li:hover a,.mainmenu li li li:hover a, 
.mainmenu li li li li:hover a, .mainmenu li li li li li:hover a
{
    color: #e0e0e0; 
}

.mainmenu ul ul a, .mainmenu ul ul a:visited,
.mainmenu li li a, .mainmenu li li a:visited
{
    color: #e0e0e0;
}
.mainmenu ul ul a:hover,
.mainmenu li:hover li:hover a,.mainmenu li:hover li:hover a:visited ,
.mainmenu li:hover li:hover li:hover a,.mainmenu li:hover li:hover li:hover a:visited,
.mainmenu li:hover li:hover li:hover li:hover a,.mainmenu li:hover li:hover li:hover li:hover a:visited ,
.mainmenu li:hover li:hover li:hover li:hover li:hover a,.mainmenu li:hover li:hover li:hover li:hover li:hover a:visited,
.mainmenu li:hover li:hover li:hover li:hover li:hover li:hover a,.mainmenu li:hover li:hover li:hover li:hover li:hover li:hover a:visited{
    color: #e0e0e0;
}
.mainmenu li:hover li:hover li a,.mainmenu li:hover li:hover li a:visited ,
.mainmenu li:hover li:hover li:hover li a,.mainmenu li:hover li:hover li:hover li a:visited,
.mainmenu li:hover li:hover li:hover li:hover li a,.mainmenu li:hover li:hover li:hover li:hover li a:visited,
.mainmenu li:hover li:hover li:hover li:hover li:hover li a,.mainmenu li:hover li:hover li:hover li:hover li:hover li a:visited{
    color: #e0e0e0;
}


/* end of mainmenu css */
+4  A: 

IE6 doesn't support :hover except on links, or child selectors at all.

Your options:

  • JavaScript (I haven't looked for a while, but UDM4 has the fewest problems that I've seen).
  • Having a basic horizontal menu for IE6 users
  • Insane hacks involving conditional comments and tables
  • Not using a drop down menu in the first place
David Dorward
see my own answer
Junaid Saeed
I have built a CSS only table that works in IE6 and, as David said, it involves a lot of conditional comments using tables. Overall, while the code works it's bulky and isn't very maintainable.I suggest keeping the menu as is, and adding a JavaScript drop down into the page. If IE6 has JS enabled, they will get the full menu, if JS is disabled, it gracefully degrades into a mostly-compatible CSS menu.
Moses