Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
E ae galera, novamente, enquanto desenvolvia um site aqui, me surgiu uma complicacao, estou construindo um menu dropdown com mais de 1 nivel de hierarquia, so q o problema eh q, como eu nao estou usando javascript, so css, qdo a pessoa coloca o mouse sobre o menu, tds os submenus, subsubmenus, subsub...menus, aparecem tbm, ja que no css eu utilizei o comportamente li:hover, alguem pode me dar uma dica de como resolver esse problema??No codigo abaixo, um exemplo do que eu estou falando esta no "Item Esq 2".Valeu galera,Túlio.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><html><head><title>Teste</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><style type="text/css">html, body { padding: 0; margin: 0; background: #999; height: 100%;}ul { list-style: none; padding: 0; margin: 0; }#corpo { width: 100%; height: 100%;}#cabeca { width: 100%; height: 100px; text-align: center; color: #FFF; font-size: 14px; background: orange;}#conteudo { position: absolute; width: 100%; color: black;}#esquerda { float: left; width: 20%; }#meio { float: left; width: 60%; background: #999; text-align: center; }#direita { width: 20%; position: absolute; top: 0; left: 100%; margin: 0 0 0 -20%; }/* Menu esquerdo********************************************************/#menuesq { cursor: pointer; width: 100%; background: #fff;}#menuesq li { border: 1px solid black; position: relative;}#menuesq li ul { display: none; position: absolute; left: 100%; top: 0; width: 100%; background: #fff;}#menuesq li:hover ul { display: block; }/* Menu Direito*******************************************************/#menudir { cursor: pointer; width: 100%; background: #fff;}#menudir li { border: 1px solid black; position: relative;}#menudir li ul { display: none; position: absolute; left: -100%; top: 0; width: 100%; background: #fff;}#menudir li:hover ul { display: block; }</style></head><body><div id="corpo"> <div id="cabeca"> Cabeca </div> <div id="conteudo"> <div id="esquerda"> <ul id="menuesq"> <li>Item Esq 1</li> <li>Item Esq 2 <ul> <li>Subitem Esq 1</li> <li>Subitem Esq 2 <ul> <li>Subsubitem 1</li> <li>Subsubitem 2</li> <li>Subsubitem 3</li> </ul> </li> <li>Subitem Esq 3</li> <li>Subitem Esq 4</li> </ul> </li> <li>Item Esq 3 <ul> <li>Subitem Esq 5</li> <li>Subitem Esq 6</li> </ul> </li> <li>Item Esq 4 <ul> <li>Subitem Esq 7</li> <li>Subitem Esq 8</li> <li>Subitem Esq 9</li> <li>Subitem Esq 10</li> </ul> </li> </ul> </div> <div id="meio"> Conteudo Central </div> <div id="direita"> <ul id="menudir"> <li>Item Dir 1</li> <li>Item Dir 2 <ul> <li>Subitem Dir 1</li> <li>Subitem Dir 2</li> <li>Subitem Dir 3</li> <li>Subitem Dir 4</li> </ul> </li> <li>Item Dir 3 <ul> <li>Subitem Dir 5</li> <li>Subitem Dir 6</li> </ul> </li> <li>Item Dir 4 <ul> <li>Subitem Dir 7</li> <li>Subitem Dir 8</li> <li>Subitem Dir 9</li> <li>Subitem Dir 10</li> </ul> </li> </ul> </div> </div></div></body></html>
Carregando comentários...
