Agregar 2nd Menu en CSS

gerardo1987 · #1 (**permalink**) 08/12/2012, 12:23

Hola que tal a todos:

Tengo este codigo en HTML:

Código PHP:

  <UL ID="navmenu-v"> 
  <LI><a href="#">Opcion 1</a></li> 
  <LI><a href="#">Opcion 2</a></li> 
  <LI><a href="#">Opcion 3</a> 
    <UL> 
      <LI><a href="#">Opcion 3.1</a></li> 
      <LI><a href="#">Opcion 3.2</a></li> 
    </UL> 
  </LI> 
  <LI><a href="#">Opcion 4</a></li> 
  <LI><a href="#">Opcion 5</a></li> 
</UL>

Y el codigo CSS es el siguiente:

Código PHP:

   
ul#navmenu-v,ul#navmenu-v li,ul#navmenu-v ul  
{ 
 position:absolute; 
 left:4px; 
 width: 180px; 
 margin: 0; 
 list-style: none; 
} 
 
ul#navmenu-v li { float: left; position: relative;  width: 100%; } 
ul#navmenu-v li.iehover { z-index: 1000; } 
 
ul#navmenu-v ul { 
 display: none; 
 position: absolute; 
 top: 0; 
 left: 100%; 
 z-index: 9999; 
} 
 
/* Menu Principal Areas*/ 
ul#navmenu-v a { 
 border-top: 1px solid #FFF; 
 border-right: 1px solid #FFF; 
 padding: 4px; 
 display: block; 
 background: #DDD; 
 color: #66; 
 font: bold 11px Arial, sans-serif; 
 text-decoration: none; 
 height: 1%; 
} 
 
/* 1st Menu*/ 
ul#navmenu-v a:hover,ul#navmenu-v li:hover a,ul#navmenu-v li.iehover a { 
 background: #BBB; 
 color: #FFF; 
} 
 
/* 2nd Menu */ 
ul#navmenu-v li:hover li a,ul#navmenu-v li.iehover li a { 
 float: none; 
 background: black; 
} 
 
 
ul#navmenu-v li:hover ul ul,ul#navmenu-v li:hover ul ul ul,ul#navmenu-v li.iehover ul ul,ul#navmenu-v li.iehover ul ul ul { display: none; } 
ul#navmenu-v li:hover ul,ul#navmenu-v ul li:hover ul,ul#navmenu-v ul ul li:hover ul,ul#navmenu-v li.iehover ul,ul#navmenu-v ul li.iehover ul,ul#navmenu-v ul ul li.iehover ul { display: block; }

El 1st Menu me aparece muy bien, pero despues con el 2nd Menu no me aparece nada, y no encuentro que pueda tener mal, me podrian ayudar para ver que me falta o que tengo mal.

ArturoGallegos · #2 (**permalink**) 08/12/2012, 12:52

1.- las ID son unicas y no puedes o deben repetirse en el mismo documento HTML, cuando se usara el codigo para dos elementos (dos menus en tu caso), en lugar de usar una ID se utiliza una clase.
2.- todo el codigo HTML se escribe en minusculas, cero mayusculas.
3.- cuando coloques codigo utiliza el Highlight que le corresponde, que para eso existe... lo que has puesto no es PHP.
4.- necesitariamos ver como estas aplicando el segundo menu, puedes dejarnos un enlace a tu sitio? si no quieres poner la url puedes usar un acortador de urls como bit.ly

pzin · #3 (**permalink**) 08/12/2012, 12:54

Supongo que te refieres al submenú. He probado tu código y el submenú aparece, un poco corrido a la derecha, pero aparece bien.

Cuando posteas código CSS, intenta usar hightlight, que es más fácil de leer luego que poniendo código CSS como si fuese PHP.

gerardo1987 · #4 (**permalink**) 08/12/2012, 13:12

Sorry por lo del codigo PHP y no ponerlo en Highlight donde debe de ir, se me paso.

Ag666, Uso un solo ID para cambiar los estilos todos a la vez, y no complicarme tanto en buscar todos, y pues probare lo de la clase, y pues hasta el momento no he tenido problema con lo de las mayusculas pero cambiare todo a minusculas. A que te refieres exactamente con ver como estoy aplicando el segundo menu, necesitas ver la pagina? es que te estoy mostrando el codigo exacto como lo tengo, no mas lo del UL y todo eso lo tengo dentro del <BODY>.

Bonez, si te aparece bien el codigo en que navegador lo pusiste??? Yo tengo el IE8, crees que sea por mi navegador, hasta ahorita no lo habia tomado en cuenta.

pzin · #5 (**permalink**) 08/12/2012, 13:16

Si lo ves con IE hay bastantes posibilidades que sea por eso. Yo lo he mirado en Chrome. No tengo IE instalado —uso Mac— así que mucho más no te puedo ayudar. Seguro que Ag666 (

) te echa una mano, aunque adora al diablo

siempre ayuda.

gerardo1987 · #6 (**permalink**) 08/12/2012, 13:23

Cita:

Iniciado por Bonez

Si lo ves con IE hay bastantes posibilidades que sea por eso. Yo lo he mirado en Chrome. No tengo IE instalado —uso Mac— así que mucho más no te puedo ayudar. Seguro que Ag666 (

) te echa una mano, aunque adora al diablo

siempre ayuda.

Ok bonez, gracias por la ayuda, como nos la complica tantos navegadores distintos

ArturoGallegos · #7 (**permalink**) 08/12/2012, 13:40

Hola Gerardo, he dicho lo de ver como esta el segundo menú porque tu has dicho agregar 2nd menú en CSS, para implica tener por ejemplo un menú en el header y otro menú en el footer o en alguna lateral.

si te refieres al submenu eso debió ser lo que dijeras, agregar "submenu con CSS"

Ahora bien, he probado el código en FF, SF, Chrome e IE7-IE9
anda perfectamente sin problemas, unicamente falla si no tienes declarado un doctype valido, revisa que lo tengas en su lugar y valida tu código
http//validator.w3.org

y compañero @Bonez :D me a causado gracia lo de adorar al diablo jejeje ya hace tiempo que pase mi etapa underground en toda cultura existente... ojala se pudiera cambiar el nombre de usuario para poner mi nombre real o algo mas jeje.

gerardo1987 · #8 (**permalink**) 08/12/2012, 13:55

Gracias Ag666, el error era exactamente el doctype que no lo declare bien, muchas gracias se te agradece.