Menu com Abas Horizontais

O menu com abas é muito utlizado por sites de vendas, é prático e funciona como um tabuleiro expondo os produtos para a venda.

O código aqui apresentado poder ser modificado livremente conforme as necessidades. Uma grande vantagem desse código é que ele não usa JavaScript, apenas a formatação Cascading Style Sheet (CSS). Veja abaixo duas abas.


1) A class .degrade é apenas um estilo de cor, não será aqui explicado porque não está relacionado com a funcionalidade do menu.
2) A class .contentBox é a mais externa, pode-se utilizar a propiredade position:absolute para posicionar o menu em qualquer posição.

.contentBox {
position:relative;
left:2px;
width:85%;
height:20px;
}
3) A propriedade z-index é uma das funcionalidades mais importante desse menu, deve-se saber utilizá-la.
A ordem natural do empilhamento(z-index), é a seguinte, o primeiro elemento do código recebe o z-index=1,  o próximo elemento recebe z-index=2 e assim por diante, esta é a ordem natural do empilhamento, o último elemento empinhado é o visível, ou seja, o elemento com z-index maior fica na frente.

Código:

<!DOCTYPE html>
<html lang="pt_BR">
<head>
<meta charset="utf-8">
<title></title>
<style>
.degrade, ul> li{
background: -ms-linear-gradient(left top, left bottom, #ffffff,#B5B5B5);/*ie10*/
background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#B5B5B5));  /*safari e chrome*/
background: -moz-linear-gradient(top, #ffffff, #B5B5B5);  /*firefox 3.6*/
background:-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#B5B5B5');   /*ie9*/
background: -o-linear-gradient(left top, left bottom,#ffffff,#B5B5B5);   /* Opera 11.10+ */
background:#DCDCDC;

.contentBox {
                position:absolute;
                left:13%;
                width:85%;
                height:20px;

            }

            .contentBox ul {
                margin:0px;
                padding:0px;
                position:relative;
                width:100%;   


            }

            .contentBox ul li {
                display:inline;
                float:left;
                background-color:#FFFF00;
                margin-right:10px;
            }


            .TabsTitle {
                width:100%;
                height:20px;
                position:relative;
                z-index:1000;
                margin:0px;
                padding:0px;
                background-color:#DCDCDC;
                <!--width:75px-->
            }

            .TabsTitle strong {
                font-size:14px;
                position:absolute;
                z-index:1000;
                width:100%;
                height:18px;
                text-align:center;
                border:#000 solid;
                border-width:1px;
                border-top-left-radius: 10px;
                border-top-right-radius: 10px;
                <!--width:73px-->
            }

            .contentBox ul ul {
                position:absolute;
                left:0px;
                display:none;
                z-index:100;
                <!--o display esta desativado, ou seja, none -->
                <!-- o z-index e igual a 100, menor que o z-index do strong que e igual a 1000, logo ficara atras do mesmo-->
            }

            .contentBox ul ul li {
                border:#000 solid;
                border-width:1px;
                width:100%;
                padding:1px;
                background-color:#DCDCDC;
                <!--width:500px-->
            }




            .contentBox ul li:hover ul {
            float:left;
                width:90%;
                display:block;
                cursor:pointer;
                <!--top:-1px-->
                !important;
                top:19px;
                <!--perceba que o display passa de none para block, ou seja, ele aparece quando o mouse passa em li, a 19px do topo do div pai -->
                <!--com top igual a 19px, a borda superior não aparecera por estar atras da borda inferior branca do strong que tem a mesma cor do fundo -->
            }

            .contentBox ul li:hover .TabsTitle strong {
                border-left:#000 solid;
                border-right:#000 solid;
                border-top:#000 solid;
                border-bottom:#fff solid;
                border-width:1px;
                background-color:#DCDCDC;
                <!-- tudo isso so para o strong perder a borda inferior quando o mouse passar pelo li  -->
            }


            body {
                cursor:default;
                margin-top: 0px;
                margin-right:0px;
                margin-bottom:0px;
                margin-left:2px;
            }
            .parag{
                text-align:left;
                font-size: 12px;
                line-height: 12px;
                text-indent:0px
                    font-family: arial,verdana;
            }
            a:hover{
                background-color:#FFFF00;
            }



            #topo{
                top:0px;
                position:absolute;
                border-radius:15px;
                width: 100%;
                height:75px;
                background-color:"#ffff00";

            }
body { overflow-y: hidden; }
</style>
</head>

<body>
<div class="contentBox">
    <ul>
       <li style="width:8%;">
           <div class="TabsTitle"><strong>Saúde</strong> </div>
               <ul>
                   <li>
                       <a href="saude1.html" target="quadro">Alimentação e Exercício</a><br>
                            <br>
                    </li>
               </ul>
        </li>
        <li style="width:8%;">
            <div class="TabsTitle"><strong>Internet</strong> </div>
                <ul>
                     <li>
                         <a href="#">1. Apostila I (Conceitos Fundamentais)</a><br>
                         <a href="#">2. Scalable Vector Graphics</a><br>
                         <a href="#">3. Gráficos com Canvas (HTML5)</a><br>
                         <a href="#l">4. Gráficos com SVG</a><br>
                        <br>
                     </li>
                </ul>
       </li>
   </ul>
</div>

</body>
</html>



Link para o código


4) O sub-ítem li interno ao primeiro ul tem o display igual a inline para ficar em linha, ou seja, na horizontal.
.contentBox ul li {
                   display:inline;
                   float:left;
                   background-color:#FFFF00;
                   margin-right:10px;
                   }
5) A class TabsTitle tem height igual 18px e z-index igual 1000 para ficar na frente de tudo. Os dois cantos da borda superior são arredondados.

.TabsTitle {
              font-size:12px;
              width:100%;
              height:18px;
              position:relative;
              z-index:1000;
              margin:0px;
              padding:0px;
              text-align:center;
              border:#000 solid;
              border-width:1px;
                border-top-left-radius: 10px;
                border-top-right-radius: 10px;
}

6) O segundo elemento ul interno  tem z-index igual a 100 para ficar atrás dos demais elementos que tem z-index igual a 1000. O display esta desativado, ou seja, none, com isso o segundo elemento ul fica fechado.

.contentBox ul ul {
                position:absolute;
                left:0px;
                  display:none;
                  z-index:100;
               }

7) Perceba que o display passa de none para block, ou seja, ele aparece quando o mouse passa em li (li:hover), o segundo ul está a 19px do topo do div pai.
    Com top igual a 19px, a borda superior do elemento ul dentro do ul ficará atrás da borda inferior da <div class="TabsTitle">, esse div tem height igual a 18px com mais 1px da borda superior e 1px da borda inferior, a mesma fica com 20px.

.contentBox ul li:hover ul {
                           float:left;
                           width:90%;
                           display:block;
                           cursor:pointer;
                           <!--top:-1px-->
                           !important;
                           top:19px;
                         }
A declaração !important serve para forçar o CSS a usar a propriedade descrita nessa linha em relação a propriedade definida diretamente no elemento HTML.


8) Toda essa formatação só para o TabsTitle perder a borda inferior quando o mouse passar pelo li.

.contentBox ul li:hover .TabsTitle {
                                           border-left:#000 solid;
                                           border-right:#000 solid;
                                           border-top:#000 solid;
                                           border-bottom:#fff solid;
                                           border-width:1px;
                                           background-color:#FFF;

                                         }

9) Os elementos HTML com suas propriedades:

<div class="contentBox">
    <ul>
       <li style="width:8%;">
           <div class="TabsTitle"><strong>Saúde</strong> </div>
               <ul>
                   <li>
                       <a href="saude1.html" target="quadro">Alimentação e Exercício</a><br>
                            <br>
                    </li>
               </ul>
        </li>
        <li style="width:8%;">
            <div class="TabsTitle"><strong>Internet</strong> </div>
                <ul>
                     <li>
                         <a href="rede/internet1.html" target="quadro">1. Apostila I (Conceitos Fundamentais)</a><br>
                         <a href="svg/framesvg.html" target="_blank">2. Scalable Vector Graphics</a><br>
                         <a href="html5/plot/HTML5Canvas.html" target="_blank">3. Gráficos com Canvas (HTML5)</a><br>
                         <a href="html5/HTML5GraphcsSVG.html" target="_blank">4. Gráficos com SVG</a><br>
                        <br>
                     </li>
                </ul>
       </li>
   </ul>
</div>


Uma única aba fica assim:
<div class="contentBox">
<ul>
       <li>
          <div class="TabsTitle"><strong>Internet</strong> </div>
            <ul>
                <li>
                 ...
                </li>
            </ul>
      </li>
</ul>