[css-d] :: drop down menus ::

[Amrinder]

Hi

I am stuck with dropdown menus. They are working fine in IE-7, and firefox and 
the evil IE6 doesn't render it.
Should I use javascript or CSS for this.

Here is my code:

**  XHTML code ** 
<div id="main_nav">
  <ul id="menu">
      <li id="nav_home" class="menu_active" ><a>Home</a></li>
       <li><a href="about.html">About Us</a></li>
       <li><a href="products.html">Retail Products</a>
            <ul>
                 <li><a href="#">Milk Powders</a></li>
                 <li><a href="#">UHT Milk</a></li>
                 <li><a href="#">Butter</a></li>
                 <li><a href="#">Cheese</a></li>
                 <li><a href="#">Liquid Products</a></li>
                 <li><a href="#">Juices</a></li>
            </ul>
       </li>
   <li><a href="ingredients.html">Dairy Ingredients</a>
       <ul>
            <li><a href="#">Milk Powder</a></li>
         <li><a href="#">Whey Powder</a></li>
         <li><a href="#">Milk Proteins</a></li>
         <li><a href="#">Butter Fat Products</a></li>
         <li><a href="#">Cheese</a></li>
        </ul>
   </li>
   <li><a href="importexport.html">Exports/Imports</a></li>
   <li id="nav_contact"><a href="contact.html">Contact Us</a></li>
  </ul>

  <div class="clear"></div>
 </div>
 <!--End main_nav-->


** CSS Code **

#main_nav {
 clear: both;
 position: relative;
 margin-top: 3px;
 border: 1px solid red;
}

#menu li {
 float: left;
 position: relative;
}
#menu li ul {
 position: absolute;
 left: 0px;
 top: 31px;
 display: none;
 background-color: #309DCF;
}

#menu a {
  background: #309DCF url(../images/menubck_18.gif) scroll repeat-x left top;
  }
  
li ul li {
 background: url(../images/menubck_18.gif) repeat-x left top;
 border:1px solid #fff;
 }
ul li a {
 display: block;
 text-decoration: none;
 padding: 6px 40px;
 border-left-width: 1px;
 border-left-style: solid;
 border-left-color: #FFF;
}
li li a {
 padding:4px 5px 4px 37px;
 width:120px;
 border-left:none;
 }
ul  #nav_home  a {
 width: 30px;
 border-left: none;
}

* html li a {
 width:auto;
 }

/*  Fix IE. Hide from IE Mac \*/
* html ul li { float: left;}
* html ul li a {height:1%;}
/* End */

#menu li:hover ul, #menu li.over ul {
 display:block; 
}

#menu a:hover {
 background-attachment: scroll;
 background-image: url(../images/menuhoverbck_18.gif);
 background-repeat: repeat-x;
 background-position: left top;
 background-color: #de5a03;
 }

** javascript code **

startList = function() {
 if (document.all&&document.getElementById) {
  navRoot = document.getElementById("nav");
  for (i=0; i<navRoot.childNodes.length; i++) {
   node = navRoot.childNodes[i];
   if (node.nodeName=="LI") {
    node.onmouseover=function() {
     this.className+=" over";
     }
    node.onmouseout=function() {
    this.className=this.className.replace(" over", "");
    }
   }
  }
 }
}
window.onload=startList;

Please Help! 
Thanks in advance.

Regards,
Amrinder 
Freelance Web Designer
www.awayback.com 
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/