Agregar un submenu en un submenu desplegable horizontal

[Ramon212]

Buenas tardes. Me gustaria aprovechar de sus conocimientos.

Estoy tratando de crear un Menú en el cual me permita tener un submenu y a la vez tener otro menú dentro de este submenú. Espero ser claro. O sea, manejar 2 niveles de opción. Les copio el código CSS que estoy usando.


* { margin: 0px;
padding: 0px; outline: 0;
}
html, body { width: 100%;}

body { background: #366;
font-family: Verdana, Arial, Helvetica, sans-serif;
}

#menu { text-align: center;
font-size: 0.7em;
width: 820px;
margin: 20px auto;
}
#menu ul { list-style-type: none;}
#menu ul li.nivel1 { float: left;
width: 162px;
margin-right: 2px;
}

#menu ul li a {display: block;
text-decoration: none;
color: #fff;
background-color: #399;
border: solid 1px #fff;
padding: 8px;
position: relative;
}

#menu ul li:hover {position: relative;
}

#menu ul li a:hover, #menu ul li:hover a.nivel1 {background-color: #6CC;
color: #000;
position: relative;
}

#menu ul li a.nivel1 {display: block!important;display: none;
position: relative;
}

#menu ul li ul {display: none;
}

#menu ul li:hover ul {display: block;
position: absolute;left: 0px;
}

#menu ul li ul li a {width: 160px;
padding: 6px 0px 8px 0px;
border-top-color: #000;
}

#menu ul li ul li a:hover {border-top-color: #000;
position: relative;
}

table.false {border-collapse:collapse;
border:0px;
float: left;
position: relative;
}

He tratado de agregar nuevos DIV, pero solo logro estropearlo mas. Espero ser claro y que pudieran ayudarme. MUCHAS GRACIAS.

[RafaRG]

hola. creo que en esta página tienes todo lo que necesitas:
http://www.chuidiang.com/css/ejemplo...egable_css.php
si aun así te quedas con dudas, dilo.
un saludo

[Ramon212]

Gracias por responder.

De allí he tomado el material que he pegado. Pero no funciona el submenu en el segundo nivel. Como podrás darte cuenta no soy nada bueno en CSS.

Algo le falta al código que allí muestran para que se despliegue. No es el mismo que ellos utilizan en su ejemplo practico.

Muchas gracias

[RafaRG]

yo he probado el código y sí me funciona. en la página especifican que es posible que no funcione en internet explorer. quizás sea eso. sino, debe de ser el código que usas (el que has puesto), pues lo he probado y no me funciona como debería.
este es el código final (ya que hay varios apartados donde se va explicando paso por paso el procedimiento):

Código PHP:

  <style type="text/css">
ul.menu
{
   list-style:none;
}
ul.menu li
{
   position:relative; /* Las coordenadas de los ul inferiores serán relativas al <li> que los contiene */
   width:70px;
}
ul.menu ul
{
   position:absolute; /* Esta posición es relativa al <li> que contiene a este <ul> */
   left:30px; /* Para que no monte sobre el <li> */
   top:-1px;
   display:none;
   list-style:none;
}
ul.menu li:hover > ul
{
   display:block;
}
</style>
<ul class="menu">
   <li>opcion 1
      <ul>
         <li>una a</li>
         <li>una b</li>
      </ul>
   </li>
   <li>opcion 2
      <ul>
         <li>una c
            <ul>
               <li>otra</li>
               <li>mas</li>
            </ul>
         </li>
         <li>una d</li>
      </ul>
   </li>
</ul> 
   

ese código puedes modificarlo de modo que quede como a ti te guste (con color, con fondo, con bordes o sin ellos, con sombras...)

[abattamkt]

Yo justo estoy buscando la solucion para hacer el primer menu horizontal y el segundo vertical pero me ha dado muchos dolores de cabeza puesto que no respeta las clases para el menu vertical, alguien tiene alguna opcion?

saludos y gracias de antemano

[Ramon212]

Muchas gracias RaFaRG.

Yo me basaba en el código final desplegado, eso me complicaba las cosas. Ahora me he limitado a usar el que muestras e iniciar desde allí. Eso me ha simplicado las cosas porque puedo estudiar cada línea y experimentar. Quise correr antes de caminar.

Te agradezco la orientación y la paciencia. GRACIAS!!!

[Ramon212]

Iniciado por abattamkt

Yo justo estoy buscando la solucion para hacer el primer menu horizontal y el segundo vertical pero me ha dado muchos dolores de cabeza puesto que no respeta las clases para el menu vertical, alguien tiene alguna opcion?

saludos y gracias de antemano

Checa si alguno te sirve. De aquí tome algunas partes. Saludos http://www.araudi.net/ejemplos/menus_desplegables_CSS.html

[RafaRG]

no hay de qué. me alegro de que te haya servido : )
abattamkt, el enlace que te ha puesto Ramon212 está muy bien. puedes ver los ejemplos y ver el código fuente de cada uno para copiar el código y editarlo. no obstante, si te quedas con dudas, puedes consultarnos.