Problem to Display Drop Down For IE6

[amrish80]

Hi,
i Have problem to display drop down menus for IE6, but my code work fine to all the browsers. can any one help me.
my code of Script and Css are as follow
CSS file code
#menu
{
background-image:url(images/main_menu.gif);
margin:0px;
padding:0px;
background-repeat:repeat-x;
height:27px;
text-align:center;
padding-left:155px;
padding-right:0px;
}
#menu ul
{
padding:0px;
margin:0px;
list-style:none;
}
#menu ul li
{
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
color:#FFF;
font-weight:bold;
position:relative;
float:left;
padding:0px 10px;
}
li ul
{
display:none;
position:absolute;
top:25px;
background-color:#0d6cae;
}
ul li a
{
display:block;
padding:5px 0px;
line-height:15px;
}
li:hover ul , li.over ul
{
display:block;
}
li:hover ul li , li.over ul li
{
width:100px;
text-align:left;
}

// JavaScript Document
startList = function()
{

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","out");

}
}
}
}
window.onload=startList;

[SuzyUK]

Hi amrish80, and Welcome to WebmasterWorld!

only IE6 needs that javascript now, that's why it's working in all other browsers..

in the JS try changing:
navRoot = document.getElementById("nav");

to
navRoot = document.getElementById("menu");

your 'nav wrapper' div seems to be #menu according to your CSS

[amrish80]

hi, this modification did not not work. for more abt u can visit <snip>

[edited by: swa66 at 10:02 am (utc) on July 9, 2009]
[edit reason] No URLs please see ToS and forum charter [/edit]

[SuzyUK]

OK.. can you change that JS back to "nav"

add the id "nav" to the menu ul - <ul id="nav">

then change you CSS slightly to remove some unnecessary stuff and to make the drop down lists be the right width in IE6

#menu {
background:url(images/main_menu.gif) repeat-x;
padding:0 0 0 155px;
margin:0;
height:27px;
text-align:center;
}
#menu ul {
padding:0;
margin:0;
list-style:none;
}
#menu ul li {
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
color:#FFF;
font-weight:bold;
position:relative;
float:left;
padding:0px 10px;
}
#menu ul li a {
display:block;
padding:5px 0px;
line-height:15px;
}
#menu ul li ul {
display:none;
position:absolute;
top:25px;
background-color:#0d6cae;
width: 100px;
text-align: left;
}
#menu ul li:hover ul, #menu ul li.over ul {
display:block;
}

if that still doesn't work properly in IE6.. i.e. your menus are sticking or not disappearing on mouse out

change the last two rules to..

#menu ul li ul {
display:none;
position:absolute;
}
#menu ul li:hover ul, #menu ul li.over ul {
display:block;
position:absolute;
top:25px;
background-color:#0d6cae;
width: 100px;
text-align: left;
}

this just swaps some things known to trigger IE6 bugs to the hover/display rule

[amrish80]

thanks it worked