[Resolvido] Problema com Menu

[PF2G]

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 June 22, 2012 by PF2G

[brunoais]

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.

[PF2G]

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...

[HappyHippyHippo]

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

eu quando reparei que no novo site do forum as tags html deixaram de ser apresentadas com highlight, passei a usar as tags de php