Ayuda de estilos en un menu desplegable horizontal

[ivanpiire]

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.

[Mikmoro]

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.

[ivanpiire]

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;
}