[SOLUCIONADO] Elemento del menu horinzontal wordpress

[satanson123]

Hola amigos, tengo este problemita con el menu de wordpress.

Cuando un subelemnto es dado click se dirige a esa categoria pero el elemento principal no cambia el background, lo que necesito mis amigos es que cuando el elemento padre cambien el background cuando este dentro de unos de sus subelemento.



Como lo muestra la imagen estoy en la categoria Epic Win y el elemento no cambia el color como lo muestro en la imagen siguiente:



Aqui mas abajo les dejo el codigo CSS:

Código CSS:

/*Menu top*/
#nav{
    width: 1120px;
    position: relative;
    top:0;
    left: 0;
    right: 0;
    z-index:999;
    height: 49px;
    margin-bottom: 30px;
    margin: 0 auto;
    background: #333;
    color: #fff;
    border-bottom: 5px solid #418cc7;
    overflow:visible;
    -webkit-transition: all 0.5s ease;
    -moz-transition:    all 0.5s ease;
    -o-transition:      all 0.5s ease;
    -ms-transition:     all 0.5s ease;
    transition:         all 0.5s ease;
}
 
#nav ul{
    clear:left;
    text-align:center;
    width: 1120px;
    padding:0;
    margin:0 auto;
    list-style-type:none;
}
#nav ul li {
 
    float: left;
        border-left: 1px solid #444444;
border-right: 1px solid #000000;
    
 
    }
#nav ul li:first-child{
    border-left: none;
    
}
#nav ul li:last-child{
    border-right: none;
    
}
#nav ul li a{
    float:left;
    text-decoration:none;
    color: #fff;
    font-weight:bold;
    padding: 15px 12px 15px 12px;
    font-size: 14px;
    text-transform:uppercase;
    position: relative;
-webkit-transition: all 0.5s ease;
    -moz-transition:    all 0.5s ease;
    -o-transition:      all 0.5s ease;
    -ms-transition:     all 0.5s ease;
    transition:         all 0.5s ease;
    
    
}
#nav ul li a:hover {
    
    float:left;
    text-decoration:none;
    background: #444444;
    color: #fff;
    font-weight:bold;
    font-size: 14px;
    position: relative;
    
}
#nav ul li:hover > a {
    color: #fff;
    background:#444444;
    text-decoration:none;
}
 
#nav li ul{
    display: none;
    position:absolute;
    margin-top: 49px;
    text-align:left;
    margin-left:-2px;
    z-index: 0; 
    width: 192px;
     -webkit-box-shadow: 0 1px 5px #33;
    -moz-box-shadow: 0 1px 5px #333;
    box-shadow: 0 1px 5px #333;
-webkit-transition: all 0.2s ease;
    
}
 
#nav li:hover > ul{
    display: block;
    border: none;
 
 
    }
#nav li li{ 
    border: none;
    float:none;
    
}
#nav li li a{
    width: 170px;
    background:#333;
    padding:10px;
    border-left: 1px solid #000;
    border-right: 1px solid #000;   
    border-bottom: 1px solid #000;
-webkit-transition: all 0.5s ease;
    -moz-transition:    all 0.5s ease;
    -o-transition:      all 0.5s ease;
    -ms-transition:     all 0.5s ease;
    transition:         all 0.5s ease;
    }
#nav li li a:hover{
    color: #fff;
    background: #444444 url(imagenes/submenu.jpg) top left repeat-y;
    }
#nav ul li.current-menu-item < a, #nav ul li.current_page_item < a{
    color: #fff;
    background:#418cc7;
    text-decoration:none;
    }
#nav ul li.current-menu-item a:hover, #nav ul li.current-menu-parent a:hover{
    color: #fff;
    background: #418cc7;
    text-decoration: none;
    }
#nav li.current-menu-item ul li a, #nav li.current-menu-parent ul li a {
    background:#333;
    color: #fff;
    
    }
#nav li.current-menu-item ul li a:hover, #nav li.current-menu-parent ul li a:hover {
    background:#444444 url(imagenes/submenu.jpg) top left repeat-y;
    color: #fff;
    
    }
#nav li.current-menu-parent ul li.current-menu-item a{
    background: #444444 url(imagenes/submenu.jpg) top left repeat-y;
    color: #fff;
    -webkit-transition: all 0.3s ease;
    -moz-transition:    all 0.3s ease;
    -o-transition:      all 0.3s ease;
    -ms-transition:     all 0.3s ease;
    transition:         all 0.3s ease;
 
}
#nav ul li.current-menu-parent ul li.current-menu-item a:hover{
    background: #333 url(imagenes/submenu.jpg) top right repeat-y;
}
 

tambien quisiera saber como puedo colocar la flecha al padre. Saludos y muchas gracias de ante mano.

[ArturoGallegos]

tu problema es?

el CSS no parece tener errores, revisa la jerarquizar de estos.... para que tenga las flechas revisa el html debería tener alguna clase que indique tiene sub elementos.

[satanson123]

Iniciado por ArturoGallegos

tu problema es?

el CSS no parece tener errores, revisa la jerarquizar de estos.... para que tenga las flechas revisa el html debería tener alguna clase que indique tiene sub elementos.

Gracias amigo por contestar, bueno ya que publique esto aca es por que no encuentro.

Esta es la forma en HTML:

Código HTML:

<div id="nav">
  <?php wp_nav_menu( array( 'theme_location' => 'menuprincipal' ) ); ?>
</div>
 

Y esta captura te enseño como esta en el area de video de la administracion:



El problema es que cuando estoy en unos de los subelemento el elemento padre no cambia de color.

Ejemplo:

Si coloco el mouse ensima del padre se habre el menu y le doy click en el hijo este me lleba a una pagina o categoria, cuando estoy en el hijo el padre no se le cambia el color ni nada, ee es mi problema.

Nota: si no entendiste por favor avisame para colocar un video, explicandote lo que pasa.

[TMeister]

Parace que necesitas agregar el CSS correspondiente para la clase "*-ancestor" ya que es una jerarquía de categorias, lee la documentación y tendrás más idea y sobre todo verifica mediante firebug o chrome developer tools que clase tiene tu elemento en el menu.

[satanson123]

Iniciado por TMeister

Parace que necesitas agregar el CSS correspondiente para la clase "*-ancestor" ya que es una jerarquía de categorias, lee la documentación y tendrás más idea y sobre todo verifica mediante firebug o chrome developer tools que clase tiene tu elemento en el menu.

Gracias por tu ayuda lo solucione de la siguiente manera:

Cambie:

Código CSS:

#nav ul li:hover > a {
    color: #fff;
    background:#444444;
    text-decoration:none;
}
 

Y coloque esto:

Código CSS:

#nav ul li.current-menu-ancestor:hover > a {
    color: #fff;
    background:#444444;
    text-decoration:none;
}
#nav ul li.current-menu-ancestor a{
    background:#418cc7;
}
 

Gracias por su ayuda.