de vertical a horizontal

[DragonX]

Amigos tengo un menu que despliega vertical y necesitaria que desplegase horizontal, uno al lado del otro:

item1 | item2 | item3

Esto necesito hacerlo para explorer 6, ya que al desplega rel menu queda por debajo de los <select> y como aparentemente no hay solución para esto, me gustaría que si uno entra con explorer 6 el menu cambie el desplegable ¿me explico?

Mi código CSS:

#contmenu{
background-color: #0667a0;
margin:0;
height:22px;
position:relative;
}
.menuppal ul{
margin: 0;
padding: 0;
list-style-type: none;
}
.menuppal ul li{
position: relative;
display: inline;
float: left;
background-color: #0667a0;
font-family:Arial;
font-size:0.9em;
}
.menuppal ul li a{
display: block;
padding: 1px 3px;
border-left: 1px solid white;
border-right: 1px solid white;
border-left-width: 0;
text-decoration: none;
text-align: center;
line-height: 20px;
color: #fff;
}
.menuppal ul li ul{
left: 0;
position: absolute;
top: 1em;
display: block;
visibility: hidden;
}
.menuppal ul li ul li{
display: block;
float: none;
}
.menuppal ul li ul li ul{
left: 259px;
top: 0;
}
.menuppal ul li ul li a{
text-align: left;
display: block;
width: 160px; /*tamaño de la caja del subMenu*/
color: #fff;
text-decoration: none;
padding: 1px 5px;
border-top: 1px solid #fff;
line-height:2em;
}

.menuppal ul li a:hover{
background-color: #84b832;
color: #fff;
text-decoration: none;
}
* html .menuppal ul li {
float: left;
height: 1%;
}
* html .menuppal ul li a {
height: 1%;
width:70px;
padding:1px 2px;
}
*html #contmenu{
height: 1%;
}
.nobr {white-space: nowrap;}
.sombra_menu{
display:block;
background:#fff url(/imagenes/sombra-menu.png) repeat-x;
height:13px;
width:100%;
}

El script que utiliza:

var menuids=["treemenu1"]

function buildsubmenus_vertical(){
for (var i=0; i<menuids.length; i++){
var menuid = document.getElementById(menuids[i]);
if(menuid!=null){
var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul")
for (var t=0; t<ultags.length; t++){
if (ultags[t].parentNode.parentNode.id==menuids[i]){
ultags[t].style.top=ultags[t].parentNode.offsetHeight+"px"
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"
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"
}
}
}
}
}

if (window.addEventListener)
window.addEventListener("load", buildsubmenus_vertical, false)
else if (window.attachEvent)
window.attachEvent("onload", buildsubmenus_vertical)

y por último el HTML:

Código HTML:

<div class="menuppal" id="contmenu"> 
  <ul id="treemenu1">
    <li><a href="#" class="mainfoldericon"><span class="nobr">Facturación</span></a>
      <ul>
        <li><a href="#">Cambio de Domícilio</a></li>
        <li><a href="#">Cuenta</a></li>
        <li><a href="#">No me llegó la factura</a></li>
        <li><a href="#">Consumos</a></li>
        <li><a href="#">No entiendo la factura</a></li>
        <li><a href="#">Cambio de fecha de vencimiento</a></li>
      </ul>
      .......
  </ul>
</div> 

Mil gracias por la ayuda!

[emiliodeg]

bueno pero esto es bastante simplon dependiendo como lo quieras hacer
una salida rapida (lo q yo haria)
agregar en el head de la pagina
<!--[if IE 6]>
<link href="estilosie6.css" rel="stylesheet" type="text/css" />
<![endif]-->

y en esta hoja extra que solo es ejecutada por ie6 modificas los estiilos para que se acomoden en horizontal

a ver si no me equivoco solo deberias agregar

.menuppal ul li ul{
margin-top:1em; /*o la altura del menu superior*/
position:static;
}
.menuppal ul li ul li {display:inline;}

aver como va por ahi
saludos

[DragonX]

Iniciado por emiliodeg

bueno pero esto es bastante simplon dependiendo como lo quieras hacer
una salida rapida (lo q yo haria)
agregar en el head de la pagina
<!--[if IE 6]>
<link href="estilosie6.css" rel="stylesheet" type="text/css" />
<![endif]-->

y en esta hoja extra que solo es ejecutada por ie6 modificas los estiilos para que se acomoden en horizontal

a ver si no me equivoco solo deberias agregar

.menuppal ul li ul{
margin-top:1em; /*o la altura del menu superior*/
position:static;
}
.menuppal ul li ul li {display:inline;}

aver como va por ahi
saludos

Gracias por tomarte el tiempo de leer todo y contestar. Al final lo pude resolver, y mejor aún, pude resolver los del div y el select en ie6!

Muchas gracias!

[emiliodeg]

despues cuando tengas tiemo ve de dejar la solucion seria interesante de ver para aprender :)

[DragonX]

estuve investigando muchisimo y logramos por medio de un iframe, que solo se activa si es Explorer 6.

Si les interesa más tarde cuelgo el código.