Ir para conteúdo
Fórum Script Brasil
  • 0

Menu horizontal css com imagens


Fabricio Cruz Casarini

Pergunta

Olá galera..

Esse é meu primeiro post no forum e gostaria da ajuda de vocês.

estou tentando adaptar esse menu para minha necessidade:

Esse é o HTML

<link href="css/menu.css" rel="stylesheet" type="text/css" />
&lt;script>
// Javascript originally by Patrick Griffiths and Dan Webb.
// http://htmldog.com/articles/suckerfish/dropdowns/
sfHover = function() {
   var sfEls = document.getElementById("navbar").getElementsByTagName("li");
   for (var i=0; i<sfEls.length; i++) {
      sfEls[i].onmouseover=function() {
         this.className+=" hover";
      }
      sfEls[i].onmouseout=function() {
         this.className=this.className.replace(new RegExp(" hover\\b"), "");
      }
   }
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>

   <div id="wrap">
      <ul id="navbar">
         <li>
             <a href="#">Institucional</a>
            <ul>
               <li><a href="#">Organização</a></li>
               <li><a href="#">Valores</a></li>
               <li><a href="#">História</a></li>
                           <li><a href="#">Membros</a></li>
                           <li><a href="#">Parceiros</a></li>
                           <li><a href="#">Contato</a></li>
            </ul>
         </li>
         <li><a href="#">Novidades</a>
            <ul>
               <li><a href="#">Campeonatos</a></li>
               <li><a href="#">Montanhimso</a></li>
               <li><a href="#">Escalada</a></li>
            </ul>         
         </li>
         <li><a href="#">Croquiteca</a>
            <ul>
               <li><a href="#">Montanhismo</a></li>
               <li><a href="#">Escalada</a></li>
            </ul>         
         </li>
      </ul>
   </div>

</body>
</html>
Esse é o CSS
/* 
    Document   : menu.css
    Created on : 19/11/2010, 13:31:23
    Author     : hrpa-41
    Description:
        Purpose of the stylesheet follows.
*/

/* 
   TODO customize this sample style
   Syntax recommendation http://www.w3.org/TR/REC-CSS2/
*/
body {
   font: 62.5%/1.2 Arial, Helvetica, sans-serif;
   background-color: #eee; }
#wrap {
   position: relative;
   font-size: 1.2em;
   width: 805px;
   height: 100px;
   padding: 0px 0px;
   margin: 0 auto;
   background-color: #fff;
   position: relative;
   

}

/* These styles create the dropdown menus. */
#navbar {
   direction:ltr;
   top: 0;
   right: 0;
   margin: 0;
   padding: 0;
   background-image: url('./img/left_menu1.png');
}

#navbar li {
   list-style: none;
   float: left;
}

#navbar li a {
   display: block;
   padding: 3px 8px;
   text-transform: uppercase;
   text-decoration: none;
   color: #999;
   font-weight: bold;
   
}

#navbar li a:hover {
   color: #000;
}
#navbar li ul {
   display: none;
}
#navbar li:hover ul, #navbar li.hover ul {
   position: absolute;
   display: inline;
   left: 0;
   width: 100%;
   margin: 0;
   padding: 0;
}
#navbar li:hover li, #navbar li.hover li {
   float: left;
}
#navbar li:hover li a, #navbar li.hover li a {
   color: #000;
}
#navbar li li a:hover {
   color: #357;
}

Assim ele funciona normal, mas eu queria estilizar o menu para ficar igual a imagem

menujg.png

Se alguém puder me ajudar a colocar as imagens eu fico muito grato.

Editado por Fabricio Cruz Casarini
Link para o comentário
Compartilhar em outros sites

4 respostass a esta questão

Posts Recomendados

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.



  • Estatísticas dos Fóruns

    • Tópicos
      152,3k
    • Posts
      652,5k
×
×
  • Criar Novo...