[Resolvido] Problemas com CSS.

[beto~ 0]

Bom pessoal vou dar alguns exemplos do meu problema e vou postar do modo que deve ficar.

 

Menu:

 

Dropdown:

 

Gostaria que ficasse da seguinte forma:

 

Menu+Dropdown:

 

 

Css:

#menu {
                position: absolute;
                width: 745px;
                height: 20px;
                float: left;
                margin: 0px 0px 0xp 40px; 
}

#menu a{ 
                text-decoration:none;
} 

#menu a:hover {
                background-color: #9b0a03; 
                color:#fff;
}


#menu ul{ 
list-style-type:none; 
margin:0; 
padding:0; 
}

#menu li ul{ 
display:none; 
}

#menu ul li{ 
display: block;
float:left; 
}

#menu ul li a { 

display: block;    /* faz os links se comportarem como blocos, o que permite atribuir largura e altura*/
padding:0; /* margem interna e externa = 0 para ficar "tudo juntinho" */
margin:0px 0px; 
width: 95px; /* definição de largura e altura para que não fique tudo tão juntinho */
height:20px; 
text-align:center; /* alinhamento de texto centralizado */
border:1px solid #ccc; /* borda - não é opcional neste caso */
background:#fff; /* cor-de-fundo - inserido somente para que o menu funcione direito no IE. Por isso escolhi a cor branca */
}

#menu ul li:hover ul {
                display:block;
                position:absolute; 
                text-align: center;
                background: #9b0a03;
}

#menu ul li:hover ul li ul {
                display: block;
                background: #9b0a03;
}

#menu ul li:hover ul li:hover ul { 
                display:block;  
                background-color: #9b0a03;

Html:

<div id="menu">
<ul>
	<li><a href="#">HOME</a></li> 
	<li><a href="#">Empresa</a> 
	<ul> 
	<li><a href="#">A Empresa</a></li>
	<li><a href="#">Principais Executivos</a></li>
	<li><a href="#">Principais Clientes</a></li>
	<li><a href="#">Depoimentos</a></li>
	</ul> 
	</li>
<li><a href="#">PRODUTO</a> 
<ul> 
	<li><a href="#">Consultoria</a></li>
	<li><a href="#">Palestras</a></li>
	<li><a href="#">Educação Corporativa</a></li>
</ul> 
</li>
<li><a href="#">LOJA</a></li> 
<li><a href="#">BLOG</a></li>
<li><a href="#">FREEZONE</a> 
	<ul> 
	<li><a href="#">Pesquisa de Mercado</a></li>
	<li><a href="#">Artigos</a></li>
	</ul> 
	</li>
	<li>
	<a href="#">CONTATO</a>
	</li> 
</ul> 
</div>

Creio que seja simples porem não estou conseguindo.

 

thx pela atenção.

[William Bruno 1501]

tentou:

#menu ul li:hover {
background: #9b0a03;
}

??

 

só toma cuidado, pois o IE6 não só reconhece o :hover na tag a

[beto~ 0]

Ja tentei e nada funciona :(

[beto~ 0]

Fiz com o javascript e ficou mais facil ;)

 

vlw pela atenção.

[Thiago Retondar 18]

Posta o código aí para o pessoal saber da solução. ^_^

 

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif