Hola a todos!!! hace unos días he terminado la página web de un Ayuntamiento, la he diseñado en Wordpress y es esta:
www.banyeresdelpenedes.cat
Tengo dos pequeños problemillas con el menú superior; tal y como preguntaba éste usuario (http://www.forosdelweb.com/f53/menu-mantener-efecto-padre-mientras-visualiza-hijo-948263/), me ocurre el mismo problema, pero he probado los consejos indicados en ése mensaje y no he podido arreglarlo.
El segundo problema creo que es una tonteria, pero no logro dar con ella; resulta que si situáis el cursor encima de alguna opción que despliegue los subapartados, hay entre la opción padre y el desplegable un píxel de separación que hace que a veces al ir a buscar los subapartados se cierre el menú.
No sé si me podríais ayudar...incluyo el código del menu.css aquí, a ver si me podríais ayudar con los dos problemas..muchísimas gracias
Código HTML:
.nav {
background: #333333;
width: 916px;
height: 32px;
color: #cdcdcd;
padding: 0px 0px 0px 0px;
margin: 10px auto 10px;
overflow: hidden;
float: left;
border-radius: 0.5em 0.5em 0em 0em;
}
.nav ul {
list-style: none;
margin: 0px;
padding: 0px;
}
.nav li {
float: left;
list-style: none;
margin: 0px;
padding: 0px;
}
.nav li a,
.nav li a:link,
.nav li a:visited {
color: #ffffff;
display: block;
font-weight: bold;
font-size: 14px;
text-decoration: none;
margin: 0px 15px 0px 0px;
padding: 9px 15px 9px 15px;
}
.nav li a:hover,
.nav li a:active {
background: #096595;
color: #ffffff;
display: block;
font-weight: bold;
font-size: 14px;
text-decoration: none;
margin: 0px 15px 0px 0px;
padding: 9px 15px 9px 15px;
border-radius: 0.5em 0.5em 0em 0em;
}
.nav li li a,
.nav li li a:link,
.nav li li a:visited {
background: #096595;
color: #ffffff !important;
display: block;
width: 180px;
float: none;
font-size: 11px;
text-transform: none;
font-weight: normal;
margin: 0px 0px 0px 0px;
padding: 3px 10px 3px 10px;
text-decoration: none;
border-radius: 0em;
}
.nav li li a:hover,
.nav li li a:active {
background: #0D8ED1;
color: #ffffff;
display: block;
padding: 3px 10px 3px 10px;
text-decoration: none;
}
.nav li li li a,
.nav li li li a:link,
.nav li li li a:visited {
background: #dedede;
color: #030303 !important;
width: 150px;
float: none;
text-transform: none;
margin: 0px 0px 0px 0px;
padding: 3px 10px 3px 10px;
text-decoration: none;
}
.nav li li li a:hover,
.nav li li li a:active {
color: #030303;
padding: 3px 10px 3px 10px;
text-decoration: underline;
}
.nav li li li li a,
.nav li li li li a:link,
.nav li li li li a:visited {
background: #cecece;
color: #030303 !important;
width: 150px;
float: none;
text-transform: none;
margin: 0px 0px 0px 0px;
padding: 4px 10px 4px 10px;
text-decoration: none;
}
.nav li li li li a:hover,
.nav li li li li a:active {
color: #030303;
padding: 4px 10px 4px 10px;
text-decoration: underline;
}
.nav li li li li li a,
.nav li li li li li a:link,
.nav li li li li li a:visited {
background: #bebebe;
color: #030303 !important;
width: 150px;
float: none;
text-transform: none;
margin: 0px 0px 0px 0px;
padding: 4px 10px 4px 10px;
text-decoration: none;
}
.nav li li li li li a:hover,
.nav li li li li li a:active {
color: #030303;
padding: 4px 10px 4px 10px;
text-decoration: underline;
}
.nav li {
float: left;
padding: 0px;
}
.nav li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 170px;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
.nav li li {
}
.nav li ul a {
width: 171px;
}
.nav li ul a:hover,
.nav li ul a:active {
}
.nav li ul ul {
width: 171px;
margin: -10px 0 0 147px;
}
.nav li:hover ul ul,
.nav li:hover ul ul ul,
.nav li.sfhover ul ul,
.nav li.sfhover ul ul ul {
left: -999em;
}
.nav li:hover ul,
.nav li li:hover ul,
.nav li li li:hover ul,
.nav li.sfhover ul,
.nav li li.sfhover ul,
.nav li li li.sfhover ul {
left: auto;
}
.nav li:hover,
.nav li.sfhover {
position: static;
}
.current-post-ancestor a,
.current-post-ancestor a:visited,
.current-post-ancestor a:hover {
}
.current-menu-item a,
.current-menu-item a:visited,
.current-menu-item a:hover {
}
.current_page_item a,
.current_page_item a:visited,
.current_page_item a:hover {
}