Amrinder wrote: > 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; > > You need to change you main <ul> id to "nav" or change the JS navroot variable declaration line to read:
navRoot = document.getElementById("menu"); This will allow the JavaScript to work properly. As it stands, the script can't target the proper DOM node. ______________________________________________________________________ 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/