Buenos Dias. Soy principiante en CSS y tengo algunas dudas. Estoy haciendo un menu horizontal con listas ordenadas. Cada elemento de la lista tiene definidas un conjunto de propiedades que lo hacen parecer un boton, tienen un color de fondo definido y un margen que separa los textos de cada boton. Al ser el menu Horizontal, los elementos de mi lista estan ordenados uno al lado del otro y no tienen ningun tipo de viñeta. Ademas funcionan como boton y cambian de estado al evento del raton, es decir, cuando el raton se posa sobre el texto de un boton cambia de fondo mediante la propiedad a: Hover, y asi sucesivamente al visitar el link, estar activo, etc. El menu con listas funciona, solo tengo 2 inconvenientes:
1) El texto del boton aparece alineado en la parte superior, ya intente con text-align y no funciona
2) La zona activa del raton es el texto y me gustaria que fuera el recuadro, ya que donde el texto del boton es pequeño me queda una amplia zona vacia, que aunque tenga contacto con el raton, no realiza ningun cambio hasta llegar al texto.
Espero me haya explicado claramente.
Aqui esta el codigo:
Html:
Codigo HTML
<ul class="Servicios">
<li class="Secundario"><a href="">Item1</a> </li>
<li class="Secundario"><a href="">Item2</a></li>
<li class="Secundario"><a href="">Item3</a></li>
<li class="Secundario"><a href="">Item4</a></li>
<li class="Secundario"><a href="">Item5</a></li>
<li class="Secundario"><a href="">Item6</a></li>
</ul>
Codigo CSS
.Servicios{
margin:0;
top:400px;
right:0;
z-index:4;
}
.Servicios
a{text-decoration:none;}
.Servicios
li
a{
color: #f6921c;
}
.Servicios li.Secundario{
left:-22px;
color:#F6921C;
height:30px;
float:left;
width:165px;
margin:1px;
padding:0;
list-style:none;
background:#335362;
font:11px Copperplate Gothic Bold, Arial Black, Verdana,Tahoma,Helvetica,Sans-serif;
text-align:center;
position:relative;
cursor:default;
font-weight: bold;
z-index:3;
}
.Servicios li.Secundario a:hover{
/* Cuando se posa sobre el boton se coloca con fondo NARANJA*/
color:#335362;
height:30px;
float:left;
width:165px;
margin:0px;
padding:0;
list-style:none;
background:#F6921C;
font:11px Copperplate Gothic Bold, Arial Black, Verdana,Tahoma,Helvetica,Sans-serif;
text-align:center;
position:relative;
cursor:default;
font-weight: bold;
/*text-decoration:underline;*/
}
.Servicios li li a{
border-bottom: 3px solid;
width:16em;
border-color: transparent;
display:block;
color:#355362;
font-weight: bold;
line-height:18px;*/
}
Espero me puedan ayudar, muchas gracias...