Ir para conteúdo
Fórum Script Brasil

Adler Liefde

Membros
  • Total de itens

    2
  • Registro em

  • Última visita

Posts postados por Adler Liefde

  1. Olá Paulo Alberto. Fiz o menu e acredito ter ficado da forma que você pediu. Caso não esteja, pode avisar que conserto aqui.

    dc8c40f7.png

    Código Html

    <div id="menu">
    <ul class="menu">
    
      <li><a href="#" class="linkdapagina">Home</a></li>
      <li><a href="#">Sobre</a></li>
      <li><a href="#">Contato</a>
             <ul>
                      <li><a href="#">link1</a></li>
                      <li><a href="#">link2</a></li>
                      <li><a href="#">link3</a></li>
                      <li><a href="#">link4</a></li>                    
    
           </ul>
    </li>
    </ul>
    </div>
    Código Css
    *{margin:0; padding:0;}
    
    #menu{background:#CCC;}
    .menu{list-style:none; margin:20px 0 0 350px; border:1px solid #c0c0c0; float:left; }
    .menu li{position:relative; float:left; border-right:1px solid #c0c0c0; }
    .menu li a{font-size:1.3em;  color:#333; text-decoration:none; padding:5px 10px; display:block;}
    .menu li a:hover{background:#CCC; color:#fff; -moz-box-shadow:0 3px 10px 0 #CCC; -webkit-box-shadow:0 3px 10px 0 #ccc; text-shadow:0px 0px 5px #fff; }
    
    .menu li   ul{position:absolute; top:23px; left:-20px; background-color:#fff; display:none; list-style:none; margin-top:12px;}
    .menu li:hover ul, .menu li.over ul{display:block;}
    .menu li ul li{border:1px solid #c0c0c0; display:block; width:110px;}
    li.border0{border:0;}
    .linkdapagina{background:#CCC;}

    Explicação: Para fazer o "home" ficar marcado eu adicionei uma classe ao link, como você pode ver nesse trecho do código Html(<a href="#" class="linkdapagina">Home</a>) .

    Se você quiser que esse efeito também fique marcado ao acessarem as outras páginas, nas próximas páginas que você fizer, basta mudar a classe do link de lugar.

×
×
  • Criar Novo...