Menu CSS --> Menu Horizontal SubMenu Vertical

K

khaluh

Power Member
Viva.

Pretendo fazer um típico menu em CSS onde o menu visivel está na horizontal e ao fazermos o hover sobre um item, aparece o submenu respectivo na vertical.

Tenho já o menu feito, só que o submenu aparece na horizontal. Tenho código para horizontal e para vertical, mas nao consigo combiná-lo de modo a ficar como pretendo.

Se puderem ajudar, agradeço.
 
Última edição pelo moderador:
Bem, cá vai código:

Código CSS

Código: 
/* Ínicio menu horizontal */
#menu_hor ul {
    display:table;
    list-style-type: none;
    margin: 0px;
    padding-top: 4px;
    padding-right: 0px;
    padding-bottom: 4px;
    padding-left: 0px;
    text-align: center;
}
#menu_hor ul li {
    display: inline;
    padding: 0px;
    height: 25px;
}

#menu_hor ul li a {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: navy;
    text-decoration: none;
    margin: 0px;
    height: 19px;
    padding-top: 3px;
    padding-right: 5px;
    padding-bottom: 3px;
    padding-left: 5px;
}


#menu_hor ul li a:hover {
    color: #666666;
    border-top: 1px solid #FFF;
    border-right: 1px solid #C6C5D3;
    border-bottom:1px solid #545478;
    border-left:1px solid #F1F1F5;
    padding:0 4px;
}
/* Fim menu Horizontal */

/* Ínicio menu Vertical */
#menu_ver ul {
    display:table;
    list-style-type: none;
    margin: 0px;
    padding-top: 4px;
    padding-right: 0px;
    padding-bottom: 4px;
    padding-left: 0px;
    text-align: center;
}

#menu_ver ul li a {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: navy;
    text-decoration: none;
    margin: 0px;
    height: 19px;
    padding-top: 3px;
    padding-right: 5px;
    padding-bottom: 3px;
    padding-left: 5px;
}
#menu_ver ul li a:hover {
    color: #666;
    border-top: 1px solid #FFF;
    border-right: 1px solid #C6C5D3;
    border-bottom:1px solid #545478;
    border-left:1px solid #F1F1F5;
    padding:0 4px;
    display:block;
}
/* Fim menu Vertical */
Código do menu

Código: 
<div id="menu_hor">
    <div align="center">
      <ul> 
          <li><a href="#">A Instituição</a>
          <ul>                  
                  <li><a href="#">Quem somos</a></li>
                <li><a href="#">Onde estamos</a></li>
                <li><a href="#">Estrutura Orgânica</a></li>
                <li><a href="#">Associados|Promotores</a></li>
          </ul>
          </li>
          <li><a href="#">A Escola Tecnológica</a>
          <ul>
                  <li><a href="#">Evolução Histórica</a></li>
                <li><a href="#">Áreas de Formação</a></li>
                <li><a href="#">Finalidades Educativas</a></li>
                <li><a href="#">Acreditações</a></li>
                <li><a href="#">Instalações</a></li>
          </ul>
          </li>
          <li><a href="#">Cursos</a>
          <ul>
                  <li><a href="#">Especialização Tecnológica</a></li>
                <li><a href="#">Actualização de Activos</a></li>
                <li><a href="#">Qualificação|Inserção Profissional</a></li>
          </ul>
          </li>
          <li><a href="#">Oportunidades</a>
          <ul>
                  <li><a href="#">Formadores</a></li>
                <li><a href="#">Formandos</a></li>
                <li><a href="#">Empregos</a></li>
          </ul>
          </li>
      </ul>
  </div>
</div>


Independentes, funcionam bem (só vertical ou só horizontal). Transcrevi apenas a parte que pretendo que tenha as 2 opções.
 
Última edição pelo moderador:
isto é totalmente feito em css, nao é?
nk fiz em css, so em javascript.

alguem me traduz por miudos kual e o conceito por tras disto em css?

kd o mouse (hover) flutua em cima do menu horizontal aparece o vertical, mas como? estava com o atributo hidden e passa para visible?
 
Sim, basicamente é isso.

Bem, entretanto arranjei um código, bastante simples.

Código HTML

Código: 
 <div class="menu-hv">
   <ul>
     <li><a href="quem-somos.php">Quem  somos</a></li>
     <li><a  href="produtos.php">Produtos</a>
       <ul>
         <li><a  href="radios-portateis.php">Rádios  portáteis</a>
           <ul>
              <li><a href="#">Terceiro  nível</a></li>
              <li><a href="#">Link 2</a></li>
              <li><a href="#">Link 3</a></li>
           </ul>
         </li>
         <li><a  href="radios-moveis.php">Rádios  móveis</a></li>
         <li><a  href="repetidoras.php">Repetidoras</a></li>
         <li><a  href="sistemas-hf.php">Sistemas HF</a></li>
         <li><a  href="acessorios.php">Acessórios</a></li>
       </ul>
     </li>
     <li><a  href="revendas.php">Revendas</a></li>
     <li><a href="cotato.php">Solicite uma  cotação</a></li>
     <li><a  href="assistencia-tecnica.php">Assistência  técnica</a></li>
     <li><a  href="locacao.php">Locação</a></li>
     <li><a href="contato.php">Contate-nos  </a></li>
   </ul>
 </div>

Código CSS

Código: 
 /* menu horizontal-vertical by micox */
 .menu-hv * { margin: 0; padding: 0;}
 .menu-hv a { display: block; }
 .menu-hv li { list-style: none; float: left; height: 1%; }
 .menu-hv li ul { position: absolute; visibility: hidden;}
 .menu-hv li ul li { float: none; white-space: nowrap; display: inline; /* o inline é pro IE */}
 .menu-hv li ul li ul { position: absolute; left: 100%; top: 0; }
 .menu-hv li:hover ul, .menu-hv li.over ul { visibility: visible;}
 .menu-hv li:hover ul ul, .menu-hv li.over ul ul { visibility: hidden;}
 .menu-hv ul ul li:hover ul, .menu-hv ul ul li.over ul { visibility: visible;}
 /* visual */
 .menu-hv {  background: #DF2800 url(img/bg-menu.jpg) repeat-x top;
                                    width: 757px;  margin: 0 0 0 12px; height: 31px;}
             .menu-hv a { font-weight: bold;  text-decoration: none; color: #FFF;
                                        padding: 0 10px; line-height: 23px;}
             .menu-hv a:hover { text-decoration:  underline; background-color: #000; color: #FFF;}
             .menu-hv ul li ul {  background-color: #DF2800; border: 1px solid #000; }



Relativamente aos direitos de autor: http://elmicox.blogspot.com
 
nao sei se ja reparaste, mas esse kodigo so funciona em firefox, nao funciona no explorer.
(pelo menos nao no 6.0 e anteriores.)
 
Relativamente a nao funcionar em Explorer, apenas coloquei a parte do CSS pois referia-se a pergunta que eu tinha colocado.

A parte do Explorer está com JavaScript
 
boas...

Eu tentei fazer um menu e ate consegui o pior e o submenu quando carrego no menu não me aparece o submenu já fiz com hover mas não consegui apenas me aparece na horizontal sem texto, queria evitar usar as listas e muito menos o javascript alguém sabe outra maneira idêntica a do khaluh???
 
Inicie sessão ou registe-se para poder participar.
Back
Topo