Opções de menu drop down

[webdevelopermgri 0]

Olá, boa noite pessoal do fórum.

Venho aqui pedir uma ajuda, pois minhas tentativas forma todas frustradas.

Já tenho um menu horizontal criado, com as opções que preciso, confesso, não foi muito fácil faze-lo por mais simples que pareça.

O que preciso agora é mostrar as opções de subcategorias nesse menu, mas não consegui adaptar ao que já tenho, tentei colocar um novo, mas ai não conseguia acertar os espaçamentos, por isso resolvi pedir essa ajuda.

 

Meu menu está assim:

 

    <div id="menuOpcoes" align="center">
     <ul>
       <li><a href="index.php?conteudo=empresa.php">Empresa</a></li>
       <li><a href="index.php?conteudo=produtos.php&cod=13">Feminino</a></li>
       <li><a href="index.php?conteudo=produtos.php&cod=12">Masculino</a></li>
       <li><a href="index.php?conteudo=produtos.php&cod=14">Acessórios</a></li>
       <li><a href="index.php?conteudo=vitrine.php">Promoções</a></li>
       <li><a href="index.php?conteudo=contato.php">Fale Conosco</a></li>
     </ul>
   </div> 

 

o css dele está assim:

 

#menuOpcoes ul {
padding:0px;
margin:0px;
float: left;
width: 1000px;
list-style:none;
height: 37px;
line-height:37px;
background-image: url(../imagens/menu.jpg);
background-repeat: no-repeat;
}
#menuOpcoes ul li {
display: inline;
}

#menuOpcoes ul li a {
color:#FFF;
font-family: Arial, Helvetica, sans-serif;
font-size:17px;
padding: 39px 39px;
text-decoration: none;
}
#menuOpcoes ul li a:hover {
color:#FFFF00;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
color: #FF0;
}

 

Preciso que ao passar o mouse, estenda um menu com as subcategorias.

Se puderem me ajudar, agradeço.

 

Valeu e fiquem na paz.

[Thiago Ericson 1]

Boa noite webdevelopermgri,

 

Vê se isso te ajuda: http://maujor.com/tutorial/ddownmenu.php

 

Caso contrário, volte a postar.

 

Forte abraço.

[webdevelopermgri 0]

Olá Thiago Ericson,

Boa noite, muito obrigado pela dica, mas pode me dizer como deixo esse menu na horizontal?

Valeu, tenha uma ótima noite e fique na paz.

[Thiago Ericson 1]

Opa, me confundi com o Horizontal.

 

Tente usar esse: http://thegoodarticle.com/horizontal-dropdown-menu-apenas-html-e-css/

 

Está bem simples de entender, e o código está bem limpo também.

 

Forte abraço.

[WilkerIceri 4]

Primeiramente a estrutura está errada, tente usar somente listas para fazer menus, um exemplo:

<nav>
<ul>
	<li>MENU UM
		<ul>
			<li>SUBMENU UM</li>
			<li>SUBMENU UM</li>
			<li>SUBMENU UM</li>
		</ul>
	</li>
	<li>MENU DOIS
		<ul>
			<li>SUBMENU DOIS</li>
			<li>SUBMENU DOIS</li>
			<li>SUBMENU DOIS</li>
		</ul>
	</li>
	<li>MENU TRES
		<ul>
			<li>SUBMENU TRES</li>
			<li>SUBMENU TRES</li>
			<li>SUBMENU TRES</li>
		</ul>
	</li>
</ul>
</nav>

 

No CSS você monta o menu normalmente e na hora de estilizar o submenu você faz usando o position: relative, mais ou menos assim:

nav ul li ul {
  position: relative;
  top: xxx;
  left: xxx;
}

[MK-Pro 3]

tem no css

tipo

 

mkpro {color:black}
mkpro:houver {color:red}