a:hover me falla en menu

[cannavaro]

que tal amigos aqui molestando otra vez tengo un problema con mi menu de navegacion ya que se desfasa con el hover es porque esta en dos lineas y asi lo necesito espero que me puedan auda dejo parte del codigo a ver si estoy en que estoy mal saludos. . . el problema lo tengo en la ultima classe .consulta espero su respuesta gracias ;)...

#nav{
margin:0;
padding:0;
width:980px;
height:49px;
margin-left: -1px;
margin-top:0px;
}
ul.menu{

display:block;
margin:0;
padding: 0;
list-style: none;
overflow:hidden;
margin-top:0px;
color:white;
float:left;
letter-spacing:2px;
}

ul.menu li{
display:block;
text-align:center;
margin:0;
padding:0;
float:left;
margin-top:0px;
margin-left:0px;
font-size:14px;
font-weight:bold;
font-family:Arial;
}


li.calib{
display:block;
width:153px;
line-height:49px;
background-image:url(img/line_button.jpg);
background-repeat:repeat-x;
}

.rep{
display:block;
width:156px;
line-height:49px;
background-image:url(img/line_button.jpg);
background-repeat:repeat-x;
}

.venta{
line-height:100%;
display:block;
width:185px;
line-height:24px;
background-image:url(img/line_button.jpg);
background-repeat:repeat-x;

}
li.consulta{
margin:0;
padding:0;
display:block;
width:226px;
height:49px;
background-image:url(img/line_button.jpg);
background-repeat:repeat-x;
width:150
}

.renta{
display:block;
width:205px;
line-height:24px;
background-image:url(img/line_button.jpg);
background-repeat:repeat-x;

}
a {
text-decoration: none;
color:white;}
a:hover {
text-decoration: none!important;
color:white;
background-color:#013d65;
padding-top:9px;
padding-left:30px;
padding-right:30px;
}

.calib a:hover {
text-decoration: none!important;
color:white;
background-color:#013d65;
padding-top:20px;
padding-bottom:13px;
padding-left:16px;
padding-right:16px;
}

.rep a:hover {
text-decoration: none!important;
color:white;
background-color:#013d65;
padding: 20px 22px 20px 22px;
}

.consulta a:hover {
block;
width:200;
height:50px;
text-decoration:none!important;
color:white;
background-color:#013d65;
padding-left:44px;
margin-left:-44px;
margin-right:-50px;
padding-right:50px;
padding-bottom:27px;
}

a:visited {
color: white;
}

[cannavaro]

bueno estuve moviendole un poco y logre solicionar parte del problema dejo la imagen trate de hacer lo mismo hacia el lado derecho pero no me queda igual y es que tengo q hacer mas ancho el boton espero su respuesta amigos, gracias de antemano . . .

[pitufoweb]

Antes de todo verifica que tu codigo no tenga errores. (por ahí vi un par de errores).

Después de haber corregido los errores pega el código HTML. Y explica que quieres hacer.



Saludos

[cannavaro]

ahi esta el codigo html y errores solo me falto un punto y coma o.O, aun me cuesta trabajo manejar css y casi siempre es en el menu espero me puedas ayudar, saludos . . .

<div id="nav">
<hr class="line_menu" />
<ul class="menu">
<li class="homi"><img class="homi2" src="img/icon_home.png" /></li>
<li class="calib"><a href="#">CALIBRACIÓN</a></li>
<li class="rep"><a href="#">REPARACIÓN</a></li>
<li class="consulta"> <a href="#">CONSULTORIA Y CAPACITACIÓN</a></li>
<li class="venta"><a href="#">VENTA DE INSTRUMENTOS</a></li>
<li class="renta"><a href="#">RENTA DE INSTRUMENTOS</a></li>
</ul>
</div>

[Bandit]

Hola cannavaro:
Si lo que pretendes es solemente cambiar el color del botón en el HOVER, el código debes de ecribirlo así:

Código CSS:

.consulta a:hover {
    display: block;
    width:226px;
    height:49px;
    background-color:#013d65;
}
 

Espero haberte sido de ayuda y sea eso lo que pretendes conseguir.

[pitufoweb]

tienes una imagen de como se tendría que ver?




Saludos

[cannavaro]

si en una es el estado normal en el color degradado y cuando en el hover tiene que cambiar al azul mas oscuro en ese boton me salio bien porque es un solo renglon, en el otro son dos lineas o dos renglones como le quieran llamar y asi los necesito pero no me queda el hover se mueve, voy a optar por poner imagen de fondo tanto para el link en estaro normal como para el hover para que quede bien espero resulte y les digo, Bandit gracias por tu respuesta no me funciono ya no jalaba el hover no se porque razon pero buena respuesta gracias por haber tomado tu tiempo en contestar ....

[pitufoweb]

Estaba analizando mas a fondo tu código CSS y lamento decirte que es todo un enredo...Tendrías que re-escribir todo de nuevo.

Recuerdo que alguna ves hice algo similar, veré si lo encuentro.


Saludos

[Bandit]

En vez de usar una imagen como background de tu botón, utiliza éste código:

Código CSS:

li.consulta{
  background-image: linear-gradient(top, #015678 49%, #1AA2EB 84%);
  background-image: -o-linear-gradient(top, #015678 49%, #1AA2EB 84%);
  background-image: -moz-linear-gradient(top, #015678 49%, #1AA2EB 84%);
  background-image: -webkit-linear-gradient(top, #015678 49%, #1AA2EB 84%);
  background-image: -ms-linear-gradient(top, #015678 49%, #1AA2EB 84%);
  display:block;
  height:49px;
  text-align: center;
  width:226px;
  background-image: -webkit-gradient(
   linear,
   left top,
   left bottom,
   color-stop(0.49, #015678),
   color-stop(0.84, #1AA2EB);
  )
 }
 .consulta a{
  color: #FFF;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
 }
 .consulta a:hover {
  display: block;
  width:226px;
  height:49px;
  background-color:#013d65;
}
 

Espero haberte sido de ayuda.