Menu desalinhado

[Lucas Stoque 0]

sou iniciante, to desenvolvendo um site mas to com muita dificuldade no menu, pode ser um erro bobo, mas ta complicado...

 

O menu era pra ficar assim quando passasse o mouse em cima.

 

 

Porém ta ficando assim.

 

 

Meu código ta assim.

 

HTML:

<div id="menu">

<div class="menu_estilo">

<ul id="nav">

<li> <a href="index.html">Home</A></li>

<li> <a href="#">Quem somos</A></li>

<li> <a href="#">Serviços</A></li>

<li> <a href="#">Clientes</A></li>

<li> <a href="#">Fale conosco</A></li>

</ul>

 

</div>

</div>

 

CSS

 

#bg_menu{

background:url(../img/bg_menu.png);

height:49px;

 

}

 

#menu{

float:left;

margin-left:160px;

margin-top:10px;

 

 

}

ul#nav li {

display:block;

float:left;

display:inline;

text-align:center;

margin-left:30px;

 

 

}

ul#nav li a{

display:block;

font-family:Euphemia;

color:white;

font-size:15px;

text-decoration:none;

height:49px;

width:118px;

 

 

}

ul#nav li a:hover{

float:left;

background:url(../img/menu_hover.png);

height:49px;

color:white;

 

}

 

se alguém poder ajudar a achar o erro eu agradeço mt.

vlw

[Apenas Eu 13]

Opa!

Rapaiz pelo que eu pude percebeu... a falha está na margin que você colocou na #menu

 

#menu{
float:left;
margin-left:160px;
margin-top:10px;

 

você ja tento deixar assim:

 

#menu{
float:left;
margin-left:160px;

 

Ou incluir a Margin-top nos da Hover?

Sugiro tambem você tirar a marcação Float:left da "Li:over a"

 

:)

[André do Vale 76]

Que tal reduzir o código e poupar um pouco do código. Fica mais simples achar, compreender e solucionar o problema:

 

<ul id="nav">
<li><a href="index.html">Home</a></li>
<li><a href="#">Quem somos</a></li>
<li><a href="#">Serviços</a></li>
<li><a href="#">Clientes</a></li>
<li><a href="#">Fale conosco</a></li>
</ul>

 

#nav {
background: url(../img/bg_menu.png);
display: inline-block;
width: 100%;
}
#nav li:first-child {
margin: 0 0 0 190px;
}
#nav li {
float: left;
text-align: center;
margin: 0 0 0 30px;
}
#nav a{
display: block;
font: 15px/49px Euphemia;
color: #fff;
text-decoration: none;
width: 118px;
}
#nav a:hover{
background:url(../img/menu_hover.png);
}

[Lucas Stoque 0]

MUITO OBRIGADO AMIGO, DEU CERTO.

posso te pedir mais uma ajuda?

 

eu quero que o hover fique no menu na pagina que está.

por exemplo, está na home, o menu fique vermelho mesmo sem passar o mouse.

tipo esse menu de cima http://insicdesigns.com/demo/css3/exp2/index.html

 

e se souber esse efeito também, mesmo sem ser css3, em jquery.

 

abraços

[Wanderson Valerio 102]

Para cada página, você adiciona uma classe no menu.

 

<ul>
<li>HOME</li>
<li class="ativa">EMPRESA</li>
<li>SERVIÇOS</li>
<li>CONTATO</li>
</ul>

[Lucas Stoque 0]

vlw amigo!

e o efeito de menu, pra ir aparecendo o gradiente no jquery...

sabe?

[Wanderson Valerio 102]

Dá pra ser em CSS3 também.

 

ul#nav li {
-webkit-transition: background 0.3s linear;
-moz-transition: background 0.3s linear;
-ms-transition: background 0.3s linear;
-o-transition: background 0.3s linear;
}

ul#nav li:hover {
background: rgb(179,220,237); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(179,220,237,1) 0%, rgba(41,184,229,1) 50%, rgba(188,224,238,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(179,220,237,1)), color-stop(50%,rgba(41,184,229,1)), color-stop(100%,rgba(188,224,238,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(179,220,237,1) 0%,rgba(41,184,229,1) 50%,rgba(188,224,238,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(179,220,237,1) 0%,rgba(41,184,229,1) 50%,rgba(188,224,238,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(179,220,237,1) 0%,rgba(41,184,229,1) 50%,rgba(188,224,238,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(179,220,237,1) 0%,rgba(41,184,229,1) 50%,rgba(188,224,238,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b3dced', endColorstr='#bce0ee',GradientType=0 ); /* IE6-9 */

}


<ul id="nav">
<li>HOME</li>
<li class="ativa">EMPRESA</li>
<li>SERVIÇOS</li>
<li>CONTATO</li>
</ul>

[Lucas Stoque 0]

deu certo não, ta aparecendo direto igual antes.

[Wanderson Valerio 102]

Espera, vou verificar o que ocorre.

 

A causa de não estar funcionando, é por causa do background, mas se colocar um color, funcionará, agora veja, este funciona:

 

<style type="text/css">
 ul#nav li {
-webkit-transition: background 0.3s linear;
-moz-transition: background 0.3s linear;
-ms-transition: background 0.3s linear;
-o-transition: background 0.3s linear;
}

ul#nav li:hover {
background: rgb(179,220,237); /* Old browsers */
-moz-linear-gradient(top,  rgba(179,220,237,1) 0%, rgba(41,184,229,1) 50%, rgba(188,224,238,1) 100%); /* FF3.6+ */
-webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(179,220,237,1)), color-stop(50%,rgba(41,184,229,1)), color-stop(100%,rgba(188,224,238,1))); /* Chrome,Safari4+ */
-webkit-linear-gradient(top,  rgba(179,220,237,1) 0%,rgba(41,184,229,1) 50%,rgba(188,224,238,1) 100%); /* Chrome10+,Safari5.1+ */
-o-linear-gradient(top,  rgba(179,220,237,1) 0%,rgba(41,184,229,1) 50%,rgba(188,224,238,1) 100%); /* Opera 11.10+ */
-ms-linear-gradient(top,  rgba(179,220,237,1) 0%,rgba(41,184,229,1) 50%,rgba(188,224,238,1) 100%); /* IE10+ */
linear-gradient(to bottom,  rgba(179,220,237,1) 0%,rgba(41,184,229,1) 50%,rgba(188,224,238,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b3dced', endColorstr='#bce0ee',GradientType=0 ); /* IE6-9 */

   }</style>


<ul id="nav">
<li>HOME</li>
<li class="ativa">EMPRESA</li>
<li>SERVIÇOS</li>
<li>CONTATO</li>
</ul>