Estou desenvolvendo um painel de controle, e o menu dele tem 3 níveis. Porém, não é um drop-down comum.
O primeiro nível, mostra as categorias, mostra um ao lado do outro através de float:left.
O segundo nível mostra as subcategorias, mostra embaixo das categorias, mas um do lado do outro, com float tb...
O terceiro nível mostra as opções dessa subcategoria, e deve ser mostrada em drop-down.
Porém não estou conseguindo fazer isso no CSS utilizando a estrutura semântica correta:
<ul> <li><a href="#">Gerenciar conteúdos</a> <ul> <li><a href="#">Textos</a> <ul> <li><a href="#">Cadastrar registro</a></li> <li><a href="#">Editar registros</a></li> </ul> </li> <li><a href="#">Links</a> <ul> <li><a href="#">Cadastrar registro</a></li> <li><a href="#">Editar registros</a></li> </ul> </li> <li><a href="#">Arquivos/downloads</a> <ul> <li><a href="#">Cadastrar registro</a></li> <li><a href="#">Editar registros</a></li> </ul> </li> <li><a href="#">Galeria de imagens</a> <ul> <li><a href="#">Cadastrar registro</a></li> <li><a href="#">Editar registros</a></li> </ul> </li> <li><a href="#">Eventos</a> <ul> <li><a href="#">Cadastrar registro</a></li> <li><a href="#">Editar registros</a></li> </ul> </li> <li><a href="#">Vídeos</a> <ul> <li><a href="#">Cadastrar registro</a></li> <li><a href="#">Editar registros</a></li> </ul> </li> <li><a href="#">Depoimentos</a> <ul> <li><a href="#">Cadastrar registro</a></li> <li><a href="#">Editar registros</a></li> </ul> </li> <li><a href="#">Banners</a> <ul> <li><a href="#">Cadastrar registro</a></li> <li><a href="#">Editar registros</a></li> </ul> </li> <li><a href="#">Avisos</a> <ul> <li><a href="#">Cadastrar registro</a></li> <li><a href="#">Editar registros</a></li> </ul> </li> </ul> </li> </ul>
Pronto, deveria ficar assim:
Ao passar o mouse em "Gerenciar conteúdo", a linha preta deveria abrir as opções. Estas opções devem ter as sub-opções em drop-down como mostra a imagem!
Empaquei no css aqui:
#menu { clear:both; margin-top:5px; } #menu ul { font-size:11px; } #menu ul li { text-align:center; position:relative; } #menu ul li:hover ul, #menu ul li ul li:hover ul { display:block; width:100%;} #menu ul li a { float:left; width:138px; height:30px; padding-top:10px; text-decoration:none; color:#444; background:url(../imagens/menu.png) no-repeat; } #menu ul li a:hover, #menu ul li a.ativo { background:url(../imagens/menu-hover.png) no-repeat; color:#FFF; } #menu ul ul, #menu ul ul ul { display:none; position:absolute; top:30px; left:0; margin:0; padding:0; } #menu ul li ul li { float:left; } #menu ul li ul li a { background:url(../imagens/bullet-1.gif) no-repeat 10px center; float:left; width:auto; height:28px; line-height:28px; color:#FFF; padding:0; padding-left:23px; padding-right:10px; margin:4px 0 0 0; } #menu ul li ul li a:hover { background:#444 url(../imagens/bullet-1.gif) no-repeat 10px center; }UPDATE: Consegui fazer o inline, mas ainda falta o drop-down, e parece que está tendo problema no chrome, e no IE7, o menu fica escadinha... zzzz
vejam online: http://www.gpaprospe...br/clientes/up/
