Fabricio Cruz Casarini

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

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.