[CSS] Ajuda com um border-bottom em um menu

  • Autor Autor ElysisOne
  • Data de início Data de início
Tradução em andamento: em alguns minutos este tópico estará em português. Por enquanto, o conteúdo está no original em espanhol. Ver original
E

ElysisOne

Gamma
Redactor
Usuário com poucas negociações! Use sempre o saldo do ForoBeta!
Saludos amigos,

Aunque algo sé de CSS, aún ignoro algunas cosas que en ocasiones me complican la vida.
Verán, He estado tuneando el tema weaver a mi gusto (quiero conseguir una apariencia similar al theme Daily Press) sin embargo tengo un pequeñisimo problema.

Si entran a mi sitio web, Cuerpo Armonioso Fitness, Salud & Belleza, verán que he creado un menú completamente blanco pero que se caracteriza por lo siguiente:

1. El borde inferior es azul, de 3 px de largo.
2. Al hacer hover sobre alguno de los items, el border-bottom cambia a verde.
3. La página o item activo automáticamente obtiene el color del border-bottom a verde.

El problema surge cuando paso el puntero del ratón (hover) por encima de un item activo, lo que genera que se sombreen 2 border-bottom, uno encima del otro.

Para explicar mejor mi problema, aquí unas capturas de pantalla:

Aquí podemos ver el menú con la propiedad active
active.webp
Aquí podemos ver la propiedad hover
2.webp
Aquí podemos ver el problema, cuando paso el mouse (hover) sobre un elemento activo
3.webp

El código CSS que he utilizado es el siguiente:
Inserir CODE, HTML ou PHP:
#access ul a:hover, #access li.current_page_item, #access li.current-menu-parent {border-bottom: 3px solid #FF4B33;}

Agradecería cualquier ayuda 🙂
 
Foi útil? Participe da conversa

Com sua conta grátis você pode responder, mandar mensagem privada ao autor e comprar com Saldo retido: o pagamento é liberado quando você recebe o combinado.

Leva 30 segundos · você volta a este tópico ao terminar
al <li> <a> (en general) ponles los atributos, ejemplo: 3px solido y veo que es azul ->
border-bottom:3px solid #00F;

y al :hover y :activo ponles un cambio de color solamente ->
border-bottom-color:#D22; (OTROCOLOR)

Saludos.
 
al <li> <a> (en general) ponles los atributos, ejemplo: 3px solido y veo que es azul ->
border-bottom:3px solid #00F;

y al :hover y :activo ponles un cambio de color solamente ->
border-bottom-color:#D22; (OTROCOLOR)
Saludos.
Bueno, creo que no me habeis entendido la cuestión. Igual, ya lo he solucionado. Gracias 🙂
 
Voltar
Topo