[Resolvido] Como criar um submenu?

[Martinsrj 0]

Olá pessoal, beleza?

Coloquei o meu código no site pastebin para melhor visualização do mesmo.

http://pastebin.com/m7891c5b1

 

A pergunta é o seguinte. O Menu de navegação está funcionando perfeitamente, porem estou com dificuldade em criar os submenus.

Gostaria de criar os submenus com o código apresentado no site pastebin.

Exemplo.

 

Home | Sites Úteis | Downloads | Fale Conosco

pppppppppppppppppJogos

pppppppppppppppppAntivirus

pppppppppppppppppPapel de parede

tem que ser um embaixo do outro...

Deem uma olhada no meu site:

http://www.martins.freeweb7.com/

 

Desde já agradeço aí pela ajuda,

Abraços. :D

[William Bruno 1501]

Esse "tipo de menu", é conhecido como "DropDown".

Eu poderia aplicar o código aqui para você, mas acho que dessa forma eu estaria te atrapalhando, e não deixando você aprender corretamente, então, dá uma olhada, se sobrar alguma duvida, volte a perguntar.

 

http://www.maujor.com/tutorial/ddownmenu.php

(muito bom o site do Maujor, sempre que tiver um tempinho dá uma lida nele)

[Martinsrj 0]

Esse "tipo de menu", é conhecido como "DropDown".

Eu poderia aplicar o código aqui para você, mas acho que dessa forma eu estaria te atrapalhando, e não deixando você aprender corretamente, então, dá uma olhada, se sobrar alguma duvida, volte a perguntar.

 

http://www.maujor.com/tutorial/ddownmenu.php

(muito bom o site do Maujor, sempre que tiver um tempinho dá uma lida nele)

Estou verificando que esse menu do Maujor é vertical, estou necessitando horizontal.

[William Bruno 1501]

E porquê não adaptar ao seu caso?

Com pequenas modificações, eu tornei o menu vertical do Maujor em horizontal..

ul#nav li { /*essa linha não existia antes */
	float: left; /* para tornar ele horizontal*/
}
li ul {
	position: absolute;
	left: -40px; /* troquei esse posicionamento */
	top: 25px; /* para aparecer em baixo, em vez de do lado*/
	display: none;
	}
ul#nav { /* adicionei a id aqui*/
	margin: 0;
	padding: 0;
	list-style: none;
	width: 250px; /* Width of Menu Items */ /* aqui eu apenas aumentei, para "caber" no container*/
	border-bottom: 1px solid #ccc;
	}

Enfim, fiz pouco, pois apenas tornei um menu que era vertical, horizontal...

Daqui e do tutorial, se você entender tudo certinho, será capaz de fazer muito sozinho.

[Martinsrj 0]

E porquê não adaptar ao seu caso?

Com pequenas modificações, eu tornei o menu vertical do Maujor em horizontal..

ul#nav li { /*essa linha não existia antes */
	float: left; /* para tornar ele horizontal*/
}
li ul {
	position: absolute;
	left: -40px; /* troquei esse posicionamento */
	top: 25px; /* para aparecer em baixo, em vez de do lado*/
	display: none;
	}
ul#nav { /* adicionei a id aqui*/
	margin: 0;
	padding: 0;
	list-style: none;
	width: 250px; /* Width of Menu Items */ /* aqui eu apenas aumentei, para "caber" no container*/
	border-bottom: 1px solid #ccc;
	}

Enfim, fiz pouco, pois apenas tornei um menu que era vertical, horizontal...

Daqui e do tutorial, se você entender tudo certinho, será capaz de fazer muito sozinho.

Uma pergunta:

Não tem como fazer apenas com CSS???

É necessário utilizar js?

Abração e obrigado pelas dicas.

[William Bruno 1501]

Sim, infelizmente o uso de JS aí é necessário, pois o nosso amiguinho IE, tem problemas com a pseudo-classe :hover.

Ele só sabe aplicar ela ao "a", e para fazer funcionar precisamos que o :hover, esteja no "li".

 

Se não fosse esses probleminhas do Internet Explorer, seria sim, totalmente possivel fazer somente com CSS. Os outros navegadores como FireFox, Opera... interpretam mais corretamente as CSS...

^^

[Martinsrj 0]

Sim, infelizmente o uso de JS aí é necessário, pois o nosso amiguinho IE, tem problemas com a pseudo-classe :hover.

Ele só sabe aplicar ela ao "a", e para fazer funcionar precisamos que o :hover, esteja no "li".

 

Se não fosse esses probleminhas do Internet Explorer, seria sim, totalmente possivel fazer somente com CSS. Os outros navegadores como FireFox, Opera... interpretam mais corretamente as CSS...

^^

 

Valeu campeão pelas dicas.

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

[inforsis 1]

Acredito que as dicas do tiu uiLL, tenham esclarecido as dúvidas iniciais do tópico. Então estou setando o mesmo como resolvido para auxiliar membros a usufruir das dicas em consultas futuras a busca, porém observamos que o problema ainda "existe" caso algum outro membro tenha uma nova dica ou algum comentário, fique esteja livre para comentar abaixo. http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif