Jump to content

[Resolvido] Problema com Menu


PF2G

Recommended Posts

Boas eu estou a começar a trabalhar com CSS e neste momento estou a criar a Home Page, quero por o logtipo e o menu na mesma linha. Só que o menu está-me a dar alguns problemas, vai para baixo do logitipo, quando devia estar a frente, a caixa do submenu não aparece e a imagem de background a:hover do submenu tbm não aparece.

Alguém me pode ajudar, sff?

html

<!----------------NAVIGATION-MENU---------------->
	 <div id="header2">
		 <img src="images/logotipo.png">

<div id="menu">
 <ul>
 <li>WATERPIK
 <ul>
 <a href="#"><li>Quem Somos</li></a>
 <img src="images/separador_submenu.png">
 <a href="#"><li>Serviço Ao Cliente</li></a>
 <img src="images/separador_submenu.png">
 <a href="#"><li>Parceiros</li></a>
 <img src="images/separador_submenu.png">
 <a href="#"><li>Artigos Clínicos</li></a>
 </ul>
 </li>
 <a href="#"><li>PRODUTOS</li></a>
 <a href="#"><li>ONDE ESTAMOS</li></a>
 <a href="#"><li>CONTACTOS</li></a>
 <a href="#"><li>LOJA ONLINE</li></a>
 </ul>
</div>
</div>
<!--------------END/NAVIGATION-MENU-------------->

css

/* head2 */
.thrColAbsHdr #header2 {
height: 65px;
}
.thrColAbsHdr #header2 h1 {
margin: 0;
padding: 10px 0;
}
/* MENU */
#menu
{
width:100%;
height:30px;
}
#menu ul
{
margin:0px;
padding:0px;
}
#menu ul li
{
display:inline;
height:30px;
float:left;
list-style:none;
margin-left:15px;
position:relative;
}
#menu li a
{
color:#fff;
text-decoration:none;
}
#menu li a:hover
{
color:#000000;
}
#menu li ul
{
margin:0px;
padding:0px;
display:none;
position:absolute;
left:0px;
top:20px;
background-image:url(images/box_submenu.png);
}
#menu li:hover ul
{
display:block;
width:160px;
}
#menu li li
{
list-style:none;
display:list-item;
width:100%;
}
#menu li li a
{
color:#fff; text-decoration:none;
}
#menu li li a:hover
{
background-image:url(images/but_submenu.png);
}
/* END MENU */
/* end head2 */
Edited by PF2G
Link to comment
Share on other sites

Põe isso mais legível sff (cores e indentação).

Põe a imagem dentro de um div, é preciso um bloco para fazer esse trabalho.

Usa o float para por a imagem à esquerda e o outro div à direita.

A soma da largura do elemento à esquerda e do elemento à direita tem que ser maior ou igual ao div que os contém (@id="header2").

Nota: Largura = width + padding + margin.

"[Os jovens da actual geração]não lêem porque não envolve um telecomando que dê para mirar e atirar, não falam porque a trapalhice é rainha e o calão é rei" autor: thoga31

Life is a genetically transmitted disease, induced by sex, with death rate of 100%.

Link to comment
Share on other sites

Ja consegui alinhar o logotipo com o menu, so tenho um problema: não consigo por a imagem background no submenu:

box-submenu:

#menu li ul
{
margin:0px;
padding:0px;
display:none;
position:absolute;
left:0px;
top:20px;
background-image:url(images/box_submenu.png);

but-submenu: hover

#menu li li a:hover
{
background-image:url(images/but_submenu.png);
}

PS: @brunoais não estou a conseguir mudar a cor do codigo em html...

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.