Hola
Gracias por el aporte Night, he probado el que sugeriste y me parece muy bueno, aunque por ahí dando vueltas y vueltas encontré uno bastante simple de implementar y me decanté por ese ya que hay menos cosas que mover. Posteo el código que encontré.
he ido a estilos de mi theme y he creado una nueva hoja de estilo poniéndole de nombre menu.css con el siguiente código dentro.
Código:
body{
background:#fff;
}
/* Root = Horizontal, Secondary = Vertical */
ul#menu {
ba
margin: 0;
border: 0 none;
padding: 0;
/* width: 500px;*/ /*For KHTML*/
width:360px;
list-style: none;
height: 20px;
border:1px solid #eee;
padding-bottom:5px;
}
ul#menu li {
margin: 0;
border: 0 none;
padding: 0;
float: left; /*For Gecko*/
display: inline;
list-style: none;
position: relative;
height: 20px;
}
ul#menu li{
padding-bottom:5px;
}
ul#menu li:hover{
background:#ddd;
}
ul#menu ul {
margin: 0;
border: 0 none;
padding: 0;
width: 160px;
list-style: none;
display: none;
position: absolute;
top: 25px;
left: 10px;
background: #eee;
border: none;
opacity: 0.8;
-moz-opacity: 0.8;
filter:alpha(opacity=80);
}
ul#menu ul:after /*From IE 7 lack of compliance*/{
clear: both;
display: block;
font: 1px/0px serif;
content: ".";
height: 0;
visibility: hidden;
}
ul#menu ul li {
width: 160px;
float: left; /*For IE 7 lack of compliance*/
display: block !important;
display: inline; /*For IE*/
}
/* Root Menu */
ul#menu a {
padding: 5px 15px 5px;
float: none !important; /*For Opera*/
float: left; /*For IE*/
display: block;
color: #9fcf21;
text-decoration: none;
font-weight: bold;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
/* border-right:1px solid #818181;*/
text-decoration: none;
height: auto !important;
height: 1%; /*For IE*/
}
/* Root Menu Hover Persistence */
ul#menu a:hover,
ul#menu li:hover a,
ul#menu li.iehover a {
color: #003300;
}
/* 2nd Menu */
ul#menu li:hover li a,
ul#menu li.iehover li a {
float: none;
border:none;
}
/* 2nd Menu Hover Persistence */
ul#menu li:hover li a:hover,
ul#menu li:hover li:hover a,
ul#menu li.iehover li a:hover,
ul#menu li.iehover li.iehover a {
background:#ddd;
color: #003300;
}
/* 3rd Menu */
ul#menu li:hover li:hover li a,
ul#menu li.iehover li.iehover li a {
background: #EEE;
color: #666;
}
/* 3rd Menu Hover Persistence */
ul#menu li:hover li:hover li a:hover,
ul#menu li:hover li:hover li:hover a,
ul#menu li.iehover li.iehover li a:hover,
ul#menu li.iehover li.iehover li.iehover a {
background:#ddd;
color: #FFF;
}
/* 4th Menu */
ul#menu li:hover li:hover li:hover li a,
ul#menu li.iehover li.iehover li.iehover li a {
background:#ddd;
color: #666;
}
/* 4th Menu Hover */
ul#menu li:hover li:hover li:hover li a:hover,
ul#menu li.iehover li.iehover li.iehover li a:hover {
background: #CCC;
color: #FFF;
}
ul#menu ul ul,
ul#menu ul ul ul {
display: none;
position: absolute;
top: 0;
left: 160px;
}
/* Do Not Move - Must Come Before display:block for Gecko */
ul#menu li:hover ul ul,
ul#menu li:hover ul ul ul,
ul#menu li.iehover ul ul,
ul#menu li.iehover ul ul ul {
display: none;
}
ul#menu li:hover ul,
ul#menu ul li:hover ul,
ul#menu ul ul li:hover ul,
ul#menu li.iehover ul,
ul#menu ul li.iehover ul,
ul#menu ul ul li.iehover ul {
display: block;
}
ul#menu .selected{
color: #003300;
}
Luego he ido a una parte cualquiera de las plantillas de mi theme para probar [en este caso usé la parte baja del footer para hacer la prueba, no sin antes hacer una copia en un archivo txt del código previo por seguridad] y agregé al final el código que mostrará los submenús verticales.
Código:
<ul id="menu">
<li><a class="selected" tihref="#">Inicio</a></li>
<li><a href="#">Descargas</a>
<ul>
<li><a href="#">Soft Desktop</a></li>
<li><a href="#">Soft Móvil</a></li>
</ul>
</li>
<li><a href="#">Localización</a></li>
<li><a href="#">Contacto</a></li>
</ul>
En este caso pude mover un poco los nombres de los submenús como se aprecia en el submenú desplegado en la imagen que adjunto.
[attachment=1923]
![[Imagen: attachment.php?aid=447]](http://www.soportemybb.com/attachment.php?aid=447)
Creo que a partir de este momento ya puedo experimentar un poco con el código hasta estar seguro de que ha quedado como quiero y ponerlo en la parte definitiva que deseo que ocupe.
Gracias nuevamente a quienes participaron en este tema dando sugerencias y diferentes opciones, creo que siempre es muy bueno tener diferentes formas de hacer las cosas y explotar al máximo las posibilidades de cada una de ellas. Resuelto
PD. no se sin aún continúa esa caracteristica pero dicen que si no se visualiza en IE se use lo siguiente dentro del css:
strict.dtd Cita:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
Última modificación: 20 Mar, 2011, 12:54 pm por
DNG3.
