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:
Ver original/*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.