Menu horizontal css com imagens

[Fabricio Cruz Casarini]

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

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

Editado Novembro 19, 2010 por Fabricio Cruz Casarini

[_Vinny_]

Você possui a imagem que esta definida no CSS?

[Fabricio Cruz Casarini]

Você possui a imagem que esta definida no CSS?

Olá Vinny, tenho todas as fatias do menu...

[_Vinny_]

Você já tem essa página hospedada? Poderia postar o link?

[GIGI_da_Programação]

Em 19/11/2010 em 18:50, _Vinny_ disse:

Você possui a imagem que esta definida no CSS?

FAZ DIREITO