Foros del Web » Creando para Internet » CSS »

Ayuda de estilos en un menu desplegable horizontal

Estas en el tema de Ayuda de estilos en un menu desplegable horizontal en el foro de CSS en Foros del Web. Buenas tardes, necesitaría ayuda para ajustar los estilos de un menu horizontal desplegable que quiero hacer idéntico al que han montado la gente de www ...
  #1 (permalink)  
Antiguo 23/02/2009, 07:39
 
Fecha de Ingreso: octubre-2008
Ubicación: Barcelona
Mensajes: 33
Antigüedad: 9 años, 2 meses
Puntos: 0
Ayuda de estilos en un menu desplegable horizontal

Buenas tardes, necesitaría ayuda para ajustar los estilos de un menu horizontal desplegable que quiero hacer idéntico al que han montado la gente de www .segway. com; como veréis los 5 botones superiores son imágenes y al pasar el mouse por encima, se desplegan las opciones, en el caso de que existan. Bien, hasta aquí he llegado yo, pero no sé como ajustar el estilo para que al pasar por encima de las opciones (segundo nivel), cambie el color de fondo y sobretodo, que aparezca a la izquierda esta pastillita de color rojo.... ¿podríais echarme un cable? Me compré el otro dia un libro sobre CSS con la esperanza de que me diese más información pero no ha sido así, sí explican como hacer menus horizontales, verticales y desplegables, pero no ponen ejemplo de lo que estoy tratando de emular.

Gracias por adelantado.
  #2 (permalink)  
Antiguo 23/02/2009, 08:04
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Ayuda de estilos en un menu desplegable horizontal

El lateral rojo es muy fácil que sea un borde, y el color de fondo pues un background-color, sin más.

Si pones tu código será más fácil que alguien te ayude a aplicarlo a este.
__________________
Visita mi nueva web idplus.org
  #3 (permalink)  
Antiguo 23/02/2009, 08:14
 
Fecha de Ingreso: octubre-2008
Ubicación: Barcelona
Mensajes: 33
Antigüedad: 9 años, 2 meses
Puntos: 0
Respuesta: Ayuda de estilos en un menu desplegable horizontal

Muchas gracias mikmoro; el código es el siguiente:

En el PHP


<ul id="navmenu-h">

<li><a href="#" class="nav-particulars"><img src="media/shim.gif" width="88" height="32"></a>

<ul>

<li class="primer"><a href="#">OPCION 1</a></li>

<li><a href="#">OPCION 2</a></li>

<li><a href="#">OPCION 3</a></li>

<li><a href="#">OPCION 4</a></li>
</ul>
</li>

<li><a href="#" class="nav-corporatiu"><img src="media/shim.gif" width="88" height="32"></a></li>

<li><a href="#" class="nav-quisom"><img src="media/shim.gif" width="88" height="32"></a>
<ul>

<li class="primer"><a href="#">OPCION 1</a></li>

<li><a href="#">OPCION 2</a></li>

<li><a href="#">OPCION 3</a></li>
</ul>

</li>

<li><a href="#" class="nav-faqs"><img src="media/shim.gif" width="88" height="32"></a></li>

<li><a href="#p" class="nav-reservat"><img src="media/shim.gif" width="88" height="32"></a></li>
</ul>
</div><!-- fi ulmenus -->

[/PHP]



Y EN EL CSS:

/* desplegable ------------------------------------------------------------------------------ */
ul#navmenu-h img {
border:0;
}

ul#navmenu-h {
margin: 0;
border: 0 none;
padding: 0 auto 0 auto;
/*padding-left:60;*/
width: 550px; /*For KHTML*/
list-style: none;
height: 30px;
font: normal 0.9em/1.5em BentonSansCond-Bold, Geneva, Arial, Helvetica, Verdana, sans-serif;
}

ul#navmenu-h li {
margin: 0;
border: 0 none;
padding: 0;
float: left; /*For Gecko*/
display: inline;
list-style: none;
position: relative;
width:88px;
height: 32px;
color:#e9e9e8;

}

ul#navmenu-h li a.nav-quisom {
overflow:hidden;
background:url(media/_quisom.jpg) no-repeat;
}

ul#navmenu-h li a.nav-quisom:hover, ul#navmenu-h li a.nav-faqs:hover, ul#navmenu-h li a.nav-particulars:hover, ul#navmenu-h li a.nav-corporatiu:hover, ul#navmenu-h li a.nav-reservat:hover {
background-position: 0px -32px;
}

ul#navmenu-h li a.nav-faqs {
overflow:hidden;
background:url(media/_faqs.jpg) no-repeat;
}

ul#navmenu-h li a.nav-particulars {
overflow:hidden;
background:url(media/_particulars.jpg) no-repeat;
}

ul#navmenu-h li a.nav-corporatiu {
overflow:hidden;
background:url(media/_corporatiu.jpg) no-repeat;
}

ul#navmenu-h li a.nav-reservat {
overflow:hidden;
background:url(media/_a_reserv.jpg) no-repeat;
}

ul#navmenu-h ul {
margin: 0;
border: 0 none;
padding: 0;
width: 150px;
list-style: none;
display: none;
position: absolute;
top: 25px;
left: 0;
}

ul#navmenu-h ul:after /*From IE 7 lack of compliance*/{
clear: both;
display: block;
font: 1px/0px serif;
content: ".";
height: 0;
visibility: hidden;
}

ul#navmenu-h ul li {
width: 150px;
float: left; /*For IE 7 lack of compliance*/
display: block !important;
display: inline; /*For IE*/
line-height:0.7em;
background-color:#ababab;
padding-left:1em;
padding-right:1.5em;
padding-top:1.4em;
border-bottom:1px solid #ABABAB;
text-align:left;
background-color:#e2e2e2;
font: normal 0.9em/1.5em BentonSansCond-Book, Geneva, Arial, Helvetica, Verdana, sans-serif;
}

ul#navmenu-h ul li.primer {
margin-top:6px;
}

/* Root Menu */
ul#navmenu-h a {
border: 0 none;
padding: 0;
float: none !important; /*For Opera*/
float: left; /*For IE*/
display: block;
background: transparent;
color: #000;
font: bold 1em/1.5em BentonSansCond-Book, Arial, Helvetica, Verdana, sans-serif;
text-decoration: none;
height: auto !important;
height: 1%; /*For IE*/
font: normal 0.9em/1.5em BentonSansCond-Book, Geneva, Arial, Helvetica, Verdana, sans-serif;
}

ul#navmenu-h a.actiu {
color:#333;
}

/* Root Menu Hover Persistence */
ul#navmenu-h a:hover,
ul#navmenu-h li:hover a,
ul#navmenu-h li.iehover a {
background-position: 0px -32px;
color: #b3b3b3;
}

/* 2nd Menu */
ul#navmenu-h li:hover li a,
ul#navmenu-h li.iehover li a {
font: normal 1em/1.5em BentonSansCond-Book, Geneva, Arial, Helvetica, Verdana, sans-serif;
float: none;
color: #737373;
}

ul#navmenu-h li:hover li a.nav-quisom, ul#navmenu-h li:hover li a.nav-faqs, ul#navmenu-h li:hover li a.nav-corporatiu, ul#navmenu-h li:hover li a.nav-particulars {
}

/* 2nd Menu Hover Persistence */
ul#navmenu-h li:hover li a:hover,
ul#navmenu-h li:hover li:hover a,
ul#navmenu-h li.iehover li a:hover,
ul#navmenu-h li.iehover li.iehover a {
color: #b3b3b3;
}

ul#navmenu-h li:hover ul,
ul#navmenu-h ul li:hover ul,
ul#navmenu-h ul ul li:hover ul,
ul#navmenu-h li.iehover ul,
ul#navmenu-h ul li.iehover ul,
ul#navmenu-h ul ul li.iehover ul {
display: block;
}

Última edición por ivanpiire; 23/02/2009 a las 10:30
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 17:53.