Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Fala aí pessoal do fórum, galera que manja do CSS....
Tudo tranquilo aí com todo mundo?!
Estou com um problema e gostaria da uma orientação de vocês.
Estou querendo fazendo um menu utilizando apenas CSS e HTML. O princípio do menu é utilizando listas (os comandos UL e IL do HTML). E a parte vizual e tudo mais é por conta do CSS. O menu que estou fazendo é igual a esse óh: http://www.maujor.com/tutorial/ddownmenu/horizontal-pt2.html
Até aí tudo bem, fiz funcionar tranquilamente. Só que o menu aí em cima, só mostra com um subnível a partir da raiz.
O menu tem acima tem essa estrutura:
:HOME:ABOUT :.... History :.... Team :.... Offices:SERVICES :.... Web Design :.... Internet Marketing :.... Hosting :.... Domain Names :.... Broadband:CONTACT US :.... United Kingdom :.... France :.... USA :.... Australia
Desculpa colocar como code, mais é que estava cortando os espaços... rs...
Então, como eu disse, até aqui tudo bem, só que o eu quero acrestentar um nível a mais de submenus, deixanso o meu menu, por exemplo, assim:
:HOME:ABOUT :.... History :.... Team :.... Offices:SERVICES :.... Web Design :.... Internet Marketing :.... Hosting :.... Domain Names :.... UOL :.... LOCALHOST :.... Broadband:CONTACT US :.... United Kingdom :.... France :.... USA :.... Australia
Reparem que no submenu de nível 1 "Domain Names", temos dois submenus de nível 2 "UOL" e "LOCALHOST".
Só que não está funcionando, eu consigo preparar o CSS ou para o tipo de menu com apenas um subnível ou para o de 2 subníveis... isso quer dizer que ele aplica o meu css para apenas um nível, se for para o nível 2, ele não vai aplicar nos menus de nível 1, vai aparecer tudo um embaixo do outro, se for para o nível 1, os de nível 2 vão aparecer como se fossem apenas de nível 1.
vou colocar aqui os códigos php e css, tudo bem?!
INDEX.PHP
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
E os CSS, eu tenho que fazer assim.
OU assim para os de nível 1:
style2.css
body { font: normal 11px verdana; }#Menu01 ul { margin: 0; padding: 0; list-style: none; width: 150px; border-bottom: 1px solid #ccc; }#Menu01 ul li { position: relative; } #Menu01 ul li ul { position: absolute; left: 149px; top: 0; display: none; }#Menu01 ul li a { display: block; text-decoration: none; color: #777; background: #fff; padding: 5px; border: 1px solid #ccc; border-bottom: 0; }#Menu01 html ul li { float: left; height: 1%; }#Menu01 html ul li a { height: 1%; }#Menu01 ul li a:hover { color: #E2144A; background: #f9f9f9; } #Menu01 li ul li a { padding: 2px 5px; } #Menu01 li:hover ul, li.over ul { display: block; }
Ou então, assim para os de nível 2
style2.css
body { font: normal 11px verdana; }#Menu01 ul{ margin: 0; padding: 0; list-style: none; width: 150px; border-bottom: 1px solid #ccc; }#Menu01 ul li ul li{ position: relative; }#Menu01 ul li ul li ul { position: absolute; left: 149px; top: 0; display: none; }#Menu01 ul li ul li ul li a { display: block; text-decoration: none; color: #777; background: #fff; padding: 5px; border: 1px solid #ccc; border-bottom: 0; }#Menu01 html ul li ul li ul li { float: left; height: 1%; }#Menu01 html ul li ul li ul li a { height: 1%; }#Menu01 ul li ul li ul li a:hover { color: #E2144A; background: #f9f9f9; }#Menu01 ul li ul li ul li a { padding: 2px 5px; }#Menu01 ul li ul li:hover ul, li.over ul { display: block; }
Até coloquei uma DIV com o nome "#Menu01" para ver se funcionava, mas não mudou em nada. Realmente precisa dessa div?
Eu acho que tenho uma noção do que possa estar acontecendo. Imagino que quando aplica um CSS do tipo, por exemplo, "#Menu01 ul li { }".
Ele acaba pegando tudo o que tem "ul li", nesta sequência. Como os submenus de nível 2, tem "ul li ul li ul li a", ele acaba aplicando, porque "ul li" está contido em "ul li ul li ul li a".
Seria isso mesmo? Tem algum fundamento no que eu estoupensando?
Poderiam me ajudar aí pessoal?!
Fico no aguardo, mas agradeço antecipadamente por ajudarem com a minha ignorância. [http://forum.imasters.com.br/public/style_emoticons/default/blush.gif
Valeu....
Carregando comentários...
