Foros del Web » Creando para Internet » CSS »

Problema menu top (adjunto imágenes)

Estas en el tema de Problema menu top (adjunto imágenes) en el foro de CSS en Foros del Web. Uso Joomla y tengo este menú top. Funciona bien en casi todas las situaciones Pero cuando activo el primer item del primer item (el primer ...
  #1 (permalink)  
Antiguo 28/04/2012, 04:04
 
Fecha de Ingreso: marzo-2012
Mensajes: 19
Antigüedad: 12 años, 7 meses
Puntos: 0
Problema menu top (adjunto imágenes)

Uso Joomla y tengo este menú top.



Funciona bien en casi todas las situaciones



Pero cuando activo el primer item del primer item (el primer hijo de tercer nivel del primer hijo del segundo nivel) me ocurre esto.



Viendo el código css, creo que el problema está en que piensa que todos los elementos del menu poesía son el primer hijo (que no tiene borde), y por eso no coloca el borde blanco en ninguno. ¿Qué puedo hacer?

Pongo aquí el código css


/** Topmenu **/

#topmenu {
margin: auto;
width: 1000px;
padding-left: 0px;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 400;
font-size: 1.2em;
color: #fff;
background-color: #000000;
overflow: auto;
}

#topmenu ul {
float: left;
padding: 0;
padding-top: 14px;
padding-bottom: 14px;
margin: 0;
list-style: none;
background-color: #000000;
}

#topmenu a {
display: block;
color: #fff;
padding-top: 0px;
padding-bottom: 0px;
padding-left: 8px;
padding-right: 8px;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 1px;
text-decoration:none;
text-transform: uppercase;
}

#topmenu a:hover {
color: #c72031;
text-decoration: none;
}


#topmenu li {
float: left;
border-left: 1px solid #9a1422;
}

#topmenu li:first-child {
border-left: 0px solid #000000;
}



/** Second-level lists **/

#topmenu li ul {
position: absolute;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 400;
font-size: 12px;
width: 162px;
left: -999em; /* "display: none" not seen by screen readers */
border: 0;
margin-left: 0px;
z-index:100;
padding-top: 0px;
padding-bottom: 0px;
}

#topmenu li li,
#topmenu li li:first-child {
border: 0;
margin-bottom: -1px; /* iPhone/iPad fix */
}

#topmenu li li a,
#topmenu li.active li a {
width: 162px;
background-color: #000000;/*Webc de 666666 a 0000000*/
padding-top: 10px;
padding-bottom: 10px;
padding-left: 24px;
margin: 0;
border-top: 1px solid #888888;
text-transform: none;
}

#topmenu li li:first-child a {
margin-top: 0px;/*Webc de 14 a 0*/
border: 0;/*Webc de border:0; a border-top: 1px solid #888888;*/
}

#topmenu li ul a {
width: 162px;
}

#topmenu li li a:hover {
color: #c72031;
text-decoration: none;
}



/** Level third and above **/

#topmenu li li li:first-child a {
margin-top: 0px;
}

#topmenu li ul ul {
margin: -40px 0 0 190px;
}

#topmenu li:hover ul ul, #topmenu li:hover ul ul ul, #topmenu li.sfhover ul ul, #topmenu li.sfhover ul ul ul {
left: -999em;
}

#topmenu li:hover ul, #topmenu li li:hover ul, #topmenu li li li:hover ul, #topmenu li.sfhover ul, #topmenu li li.sfhover ul, #topmenu li li li.sfhover ul { /* nested under hovered items */
left: auto;
}

Y éste es el código fuente de la página referente al menú top

<div id="topmenu">

<ul class="menu">
<li class="item-101 current active"><a href="/" >Inicio</a></li><li class="item-107"><a href="/index.php/biografia" >Biografia</a></li><li class="item-151"><a href="/index.php/premios" >Distinciones</a></li><li class="item-108 deeper parent"><a href="#" >Publicaciones</a><ul><li class="item-114 deeper parent"><a href="#" >Poesía</a><ul><li class="item-115"><a href="/index.php/publlicaciones/poesia/libros" >Libros</a></li><li class="item-211"><a href="/index.php/publlicaciones/poesia/cuadernos" >Cuadernos</a></li><li class="item-112"><a href="/index.php/publlicaciones/poesia/antologias" >Antologías</a></li><li class="item-110"><a href="/index.php/publlicaciones/poesia/antologias-criticas" >Antologías críticas</a></li><li class="item-113"><a href="/index.php/publlicaciones/poesia/en-compania" >En compañía</a></li><li class="item-118"><a href="/index.php/publlicaciones/poesia/traducciones" >Traducciones</a></li></ul></li><li class="item-109"><a href="/index.php/publlicaciones/antologa-y-prologuista" >Antologa y prologuista</a></li><li class="item-111"><a href="/index.php/publlicaciones/otros-generos" >Otros géneros</a></li><li class="item-116"><a href="/index.php/publlicaciones/relatos" >Relatos</a></li><li class="item-152 deeper parent"><a href="#" >Sobre la autora</a><ul><li class="item-153"><a href="/index.php/publlicaciones/sobre-la-autora/estudios-en-volumen" >Estudios en volumen</a></li><li class="item-154"><a href="/index.php/publlicaciones/sobre-la-autora/seleccion-critica" >Selección crítica</a></li><li class="item-155"><a href="/index.php/publlicaciones/sobre-la-autora/criticas" >Críticas</a></li></ul></li></ul></li><li class="item-204"><a href="/index.php/poemas" >Poemas</a></li><li class="item-135 deeper parent"><a href="#" >Curiosidades</a><ul><li class="item-184"><a href="/index.php/medios/articulos" >Artículos</a></li><li class="item-185"><a href="/index.php/medios/noticias" >Noticias</a></li><li class="item-199"><a href="/index.php/medios/resenas-sobre-la-autora" >Reseñas sobre la autora</a></li><li class="item-200"><a href="/index.php/medios/resenas-de-la-autora" >Reseñas de la autora</a></li><li class="item-150"><a href="/index.php/medios/videos" >Vídeos</a></li><li class="item-183"><a href="/index.php/medios/fonoteca" >Fonoteca</a></li></ul></li><li class="item-182 deeper parent"><a href="/index.php/imagenes" >Imágenes</a><ul><li class="item-201"><a href="/index.php/imagenes/un-poco-de-historia" >Un poco de historia</a></li><li class="item-202"><a href="/index.php/imagenes/con-otros-artistas" >Con...</a></li><li class="item-203"><a href="/index.php/imagenes/personales" >La vida y el tiempo</a></li></ul></li><li class="item-210"><a href="/index.php/contacto" >Contacto</a></li></ul>

</div>

Muchas gracias!!
  #2 (permalink)  
Antiguo 29/04/2012, 08:08
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 17 años, 5 meses
Puntos: 539
Respuesta: Problema menu top (adjunto imágenes)

Especificidad de los selectores

Su selector y declaración en esta regla
Código CSS:
Ver original
  1. #topmenu li li:first-child a {
  2.     border: 0 none;
  3. }
prevalece sobre
Código CSS:
Ver original
  1. #topmenu li li a, #topmenu li.active li a {
  2.     border-top: 1px solid #888888;
  3. }

Solucciones:
Varias. O reescribe con otra regla para el | :first-child a | de ese nivel o aplica un !important

Adenda:
1: No acabo de entender la razón del | overflow | en #topmenu
2: Por favor, para publicar códigos utilice las etiquetas [HIGHLIGHT="#"][/HIGHLIGHT] correspondientes.
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++

Etiquetas: hover, top, adjuntos, fondo
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 04:30.