Foros del Web » Creando para Internet » CSS »

Agregar un submenu en un submenu desplegable horizontal

Estas en el tema de Agregar un submenu en un submenu desplegable horizontal en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 11/10/2011, 16:11
 
Fecha de Ingreso: octubre-2011
Ubicación: México
Mensajes: 8
Antigüedad: 8 años, 2 meses
Puntos: 0
Exclamación Agregar un submenu en un submenu desplegable horizontal

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.
  #2 (permalink)  
Antiguo 11/10/2011, 17:12
Avatar de RafaRG  
Fecha de Ingreso: julio-2011
Ubicación: Córdoba, España
Mensajes: 124
Antigüedad: 8 años, 5 meses
Puntos: 13
Respuesta: Agregar un submenu en un submenu desplegable horizontal

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
  #3 (permalink)  
Antiguo 12/10/2011, 00:44
 
Fecha de Ingreso: octubre-2011
Ubicación: México
Mensajes: 8
Antigüedad: 8 años, 2 meses
Puntos: 0
Respuesta: Agregar un submenu en un submenu desplegable horizontal

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
  #4 (permalink)  
Antiguo 12/10/2011, 08:22
Avatar de RafaRG  
Fecha de Ingreso: julio-2011
Ubicación: Córdoba, España
Mensajes: 124
Antigüedad: 8 años, 5 meses
Puntos: 13
Respuesta: Agregar un submenu en un submenu desplegable horizontal

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...)
  #5 (permalink)  
Antiguo 12/10/2011, 10:48
 
Fecha de Ingreso: agosto-2011
Ubicación: Mexico, DF
Mensajes: 26
Antigüedad: 8 años, 3 meses
Puntos: 3
Respuesta: Agregar un submenu en un submenu desplegable horizontal

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
  #6 (permalink)  
Antiguo 12/10/2011, 11:46
 
Fecha de Ingreso: octubre-2011
Ubicación: México
Mensajes: 8
Antigüedad: 8 años, 2 meses
Puntos: 0
Respuesta: Agregar un submenu en un submenu desplegable horizontal

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!!!
  #7 (permalink)  
Antiguo 12/10/2011, 11:50
 
Fecha de Ingreso: octubre-2011
Ubicación: México
Mensajes: 8
Antigüedad: 8 años, 2 meses
Puntos: 0
Respuesta: Agregar un submenu en un submenu desplegable horizontal

Cita:
Iniciado por abattamkt Ver Mensaje
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

Última edición por Ramon212; 12/10/2011 a las 11:50 Razón: Falto agregar un link
  #8 (permalink)  
Antiguo 12/10/2011, 14:00
Avatar de RafaRG  
Fecha de Ingreso: julio-2011
Ubicación: Córdoba, España
Mensajes: 124
Antigüedad: 8 años, 5 meses
Puntos: 13
Respuesta: Agregar un submenu en un submenu desplegable horizontal

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.

Etiquetas: desplegables, menus
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 07:54.