Dudas:
1-. como se deja estatica una imagen en este caso estoy usando las pseudo clases para los botones (hover, visited, active)
les pongo el problema q tengo con la botonera
en esta imagen tengo un menu principal y un submenu pero hay un tercer submenu el cual depende las opciones q se seleccionen pero no he logrado q quede fijo el tercer submenu al poner el puntero sobre la opcion del segundo menu
He logrado hacer q kede el efecto de estar seleccionado con el evento Active pero aun no logro dejarlo fijo para poder seleccionar una opcion del tercer submenu
Otro problema q tengo es en el tercer Submenu ya que como veran la imgen es muy pequeña y entonces ni de chiste logro poder seleccionarla no se como hacer q esa imagen se repita al ancho de mi pagina para poder seleccionarla he tratado con repeat-x pero no lo he conseguido
espero alguien me pueda asesorar en este problema [img]http://img230.imagevenue.com/img.php?image=84173_botonera_122_86lo.jpg[/img]
este es mi codigo CSS por favor lo hice a mi entender espero le entiendan ustedes tambien
Código :
/* Imagen de segundo nivel de menus */
.nav {
background: url("../images/SegundoNivel.jpg") top left repeat-x;
}
/* Estado para el sub menu SEGUNDO nivel*/
/*Orillas del tercer nivel*/
#nav .orillaI2 {display:block; float:left; height:40px; line-height:42px; color:#ddd; text-decoration:none; font-family:arial, verdana, sans-serif; font-weight:bold; text-align:center; padding:0 0 0 11px; cursor:pointer; background:url(../images/SubMenuLeft.jpg) no-repeat;}
#nav .orillaD2 {display:block; float:left; height:40px; line-height:42px; color:#ddd; text-decoration:none; font-family:arial, verdana, sans-serif; font-weight:bold; text-align:center; padding:0 16px 0 0; cursor:pointer; background:url(../images/SubMenuRight.jpg) no-repeat;}
/*Posición del Primer nivel*/
ul.nav{
margin:0 auto;
padding:0;
list-style:none;
white-space:nowrap;
height:40px;
position:relative;
font-size:10px;
}
.nav li {
margin:0;
padding:0;
float:left;
}
/*Estilo para primer nivel*/
.nav li a {
display:block;
float:left;
height:40px;
line-height:35px;
color:#2b3e4d;
font-size:11px;
text-decoration:none;
font-family:arial, verdana, sans-serif;
font-weight:bolder;
text-align:center;
padding:0 7px 0 7px;
cursor:pointer;
background:url("../images/PNG/linea x30.png") no-repeat;
}
/*Estilo para segundo nivel*/
ul.nav li ul li a{
float:left;
display:block;
padding:0 7px 0 7px;
color:#2b3e4d;
height:35px;
background:url("../images/SubMenuCenter.jpg") top repeat-x;
}
.nav li ul li a:active{
background:url:("../images/PNG/submenua.png");
display:inline;
padding:0 7px 0 7px;
color:#FF0000;
}
/*Segundo Nivel quedo raro pero funciona en todos los browsers*/
/*
.nav ul{
/*Remueve todos los espacios de las listas*/
margin:0 auto;
padding:0;
list-style:none;
white-space:nowrap;
height:40px;
position:relative;
font-size:11px;
}
*/
/*
ul.nav{
display: table;
}
*/
ul.nav>li{
display: table-cell;
position: relative;
padding: 10px 6px ;
}
/*Hace la sub lista invisible*/
ul.nav li>ul{
display: none;
position: absolute;
top: 29px;
left: 0;
}
/*Cuando esta el evento hover aparecen*/
ul.nav li:hover>ul{
display : block;
}
.nav li a:hover{
display: inline;
color:#FFF;
text-decoration:none;
font-size:11px;
font-family:arial, verdana, sans-serif;
font-weight:bolder;
text-align:center;
line-height:35px;
height:35px;
background: url("../images/PNG/submenua.png");
}
.nav li a:active {
background: url("../images/PNG/submenua.png");
}
Gracias y espero alguien me ayude ya se aclarandome o corrigiendome los errores para entenderle mejor yo o con algun ejemplo q pueda ver para darme una idea e impelementarlo yo
Gracias
