Horizontal Menu doesn't work in IE

[junal]

i m facing a new problem !....created a horizontal menu using javascript and css. it works well in firefoz but when i run it by IE it gers vertical :(.....any suggestion ....?

[acoder]

Please post your code.

[junal]

Please post your code.

--CSS code--

.nav2
{
float:left; width:900px; border:none; background:rgb(220,220,220) url(../img/bg_head_bottom_nav.jpg) repeat-x; color:rgb(75,75,75); font-size:1.0em; font-size:130%;
}

.nav2 ul{
margin: 0;
padding: 0;
list-style-type: none;
}


/*Top level list items*/
.nav2 ul li{
float:left; position:relative; z-index:1000; border-right:solid 1px rgb(175,175,175);
}

/*Top level menu link items style*/
.nav2 ul li a{
float:none; 
width:auto;
display:block; height:3.1em; line-height:3.1em; padding:0 16px 0 16px; text-decoration:none; font-weight:bold; color: rgb(100,100,100);}
	
/*1st sub level menu*/
.nav2 ul li ul{
left: 0;
position: absolute;
top: 1em; /* no need to change, as true value set by script */
display: block;
visibility: hidden;
background:url(../img/bg_head_bottom_nav_hover.gif) top center;
}

.nav2 ul li:hover ul li a {display:block; width:10em; height:auto; line-height:1.3em; margin-left:-1px; padding:4px 16px 4px 24px; border-left:solid 1px rgb(175,175,175); border-bottom: solid 1px rgb(175,175,175); background-color:rgb(237,237,237); font-weight:normal; color:rgb(50,50,50);} /*Color subcells normal mode*/
.nav2 ul li:hover ul li a:hover {background-color:rgb(210,210,210); text-decoration:none;}

.nav2 ul li a:hover ul {display:block; position:absolute;z-index: 998; top:3.1em; t\op:3.0em; left:0; marg\in-top:0.1em;}
.nav2 ul li a:hover ul li a {display:block; width:10em; height:1px; line-height:1.3em; padding:0px 10px 0px 10px; border-left:solid 1px rgb(175,175,175); border-bottom: solid 0px rgb(175,175,175); background-color:rgb(237,237,237); font-weight:normal; color:rgb(50,50,50);} /*Color subcells normal mode*/
.nav2 ul li a:hover .menuborder {border-bottom: solid 1px rgb(175,175,175);}
.nav2 ul li a:hover ul li a ul {visibility:hidden; height:0px; width:0px; position:absolute; z-index: 997;}
.nav2 ul li a:hover ul li a:hover {background-color:rgb(210,210,210); text-decoration:none;} /*Color subcells hovering mode*/

/*Sub level menu list items (undo style from Top level List Items)*/
.nav2 ul li ul li{
display: list-item;
float: none;
}

/*All subsequent sub menu levels offset after 1st level sub menu */
.nav2 ul li ul li ul{ 
left: 159px; /* no need to change, as true value set by script */
top: 0;
}

/* Sub level menu links style */
.nav2 ul li ul li a{
display: block;
width: 160px; /*width of sub menu levels*/
color: navy;
text-decoration: none;
padding: 1px 5px;
border: 1px solid #ccc;
}

.nav2 ul li a:hover{
background-color:rgb(210,210,210); text-decoration:none;
}

/*Background image for top level menu list links */
.nav2 .mainfoldericon{
background: #F3F3F3 url(media/arrow-down.gif) no-repeat center right;
}

/*Background image for subsequent level menu list links */
.nav2 .subfoldericon{
background: #F3F3F3 url(media/arrow-right.gif) no-repeat center right;
}

* html p#iepara{ /*For a paragraph (if any) that immediately follows suckertree menu, add 1em top spacing between the two in IE*/
padding-top: 1em;
}
	
* html .nav2 ul li { float: left; height: 1%;}
* html .nav2 ul li a { height: 1%;}
* html .nav2 ul li ul li { float: left;}

--Javascript code--

 var menuids=["treemenu1"] //Enter id(s) of SuckerTree UL menus, separated by commas

function buildsubmenus_horizontal(){
for (var i=0; i<menuids.length; i++){
var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul")
for (var t=0; t<ultags.length; t++){
	if (ultags[t].parentNode.parentNode.id==menuids[i]){ //if this is a first level submenu
		ultags[t].style.top=ultags[t].parentNode.offsetHeight+"px" //dynamically position first level submenus to be height of main menu item
		//ultags[t].parentNode.getElementsByTagName("a")[0].className="mainfoldericon"
	}
	else{ //else if this is a sub level menu (ul)
	  ultags[t].style.left=ultags[t-1].getElementsByTagName("a")[0].offsetWidth+"px" //position menu to the right of menu item that activated it
	//ultags[t].parentNode.getElementsByTagName("a")[0].className="subfoldericon"
	}
ultags[t].parentNode.onmouseover=function(){
this.getElementsByTagName("ul")[0].style.visibility="visible"
}
ultags[t].parentNode.onmouseout=function(){
this.getElementsByTagName("ul")[0].style.visibility="hidden"
}
}
}
}

--html code---

[HTML] <div class="nav2">
<ul id="treemenu1" >
<li><a href="index.htm l"">Home</a></li>

<li><a href="">Product ion</a>
<ul>
<li><a>Sampling </a>
<ul>
<li><a href="addsample .html">Add Sample</a></li>
<li><a href="addsample .html">View Sampling</a></li>
<li><a href="addsample .html">Edit Sampling</a></li>
<li><a href="addsample .html">Delete Sampling</a></li>

</ul>


</li>

<li><a>Producti on</a>

<ul>
<li><a href="addproduc tion.html">Add Production</a></li>
<li><a href="addproduc tion.html">View Production</a></li>
<li><a href="addproduc tion.html">Dele te Production</a></li>
<li><a href="addproduc tion.html">Edit Production</a></li>
</ul>

</li>
<li><a href=>Report</a></li>


</ul>
</a>
</li>
<li><a href="#">Produc tion Cost Management</a></li>
<li><a href="#">CRM</a></li>
<li><a href="#">Invent ory</a></li>
<li><a href="#">User Management System</a></li>


</ul>
<br style="clear: left;" />
</div>[/HTML]
Code in tags - moderator

[acoder]

I assume you are using this script. IE6, as you will know is a buggy browser that doesn't support CSS properly. There are some hacks to solve this. Have you been through the comments on that page? You may have to ask on the CSS forum. Your Javascript seems ok.

[junal]

I assume you are using this script. IE6, as you will know is a buggy browser that doesn't support CSS properly. There are some hacks to solve this. Have you been through the comments on that page? You may have to ask on the CSS forum. Your Javascript seems ok.

your right acoder. thx for the reply.

[acoder]

You're welcome. Did it solve your problem?

[junal]

thx acoder. ya i solved my problem by css. thx for asking :)