direito do blog, entao temos aqui o mesmo codigo pronto para download.<style type="text/css"><!--ul.MenuBarHorizontal{margin: 0;padding: 0;list-style-type: none;font-size: 100%;width: auto;}ul.MenuBarHorizontal{margin: 0;padding: 0;list-style-type: none;font-size: 100%;width: auto;}ul.MenuBarActive{z-index: 1000;}ul.MenuBarHorizontal li{margin: 0;padding: 0;list-style-type: none;font-size: 100%;position: relative;text-align: left;cursor: pointer;width: 150px;float: left;}ul.MenuBarHorizontal ul{margin: 0;padding: 0;list-style-type: none;font-size: 100%;z-index: 1020;cursor: default;width: 150px;position: absolute;left: -1000em;}ul.MenuBarHorizontal ul.MenuBarSubmenuVisible{left: auto;}ul.MenuBarHorizontal ul li{width: 150px;}ul.MenuBarHorizontal ul ul{position: absolute;margin: -5% 0 0 95%;}ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible{left: auto;top: 0;}ul.MenuBarHorizontal a{background-color: #6633FF;border-top: 1px solid #FFFFFF;color: #FFFFFF;border-right: 1px solid #0000CC;border-bottom: 1px solid #0000CC;border-left: 1px solid #FFFFFF;font-size: 120%;text-decoration: none;padding-top: 5px;padding-bottom: 4px;width: 150px;display: block;text-align: center;font-family: Arial, Helvetica, sans-serif;}ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus{background-color: #FFCC99;background-image: url(http://img16.imageshack.us/img16/122/overc.gif);color: #000000;letter-spacing: normal;word-spacing: normal;border-top: 1px solid #FFFF00;border-right: 1px solid #CC0000;border-bottom: 1px solid #CC0000;border-left: 1px solid #FFFF00;}ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible{background-color: #66CCFF;}ul.MenuBarHorizontal iframe{position: absolute;z-index: 1010;}ul.MenuBarHorizontal li.MenuBarItemIE{display: inline;float: left;background: #FFF;}ul.MenuBarHorizontal a.MenuBarItemSubmenu{background-image: url(http://img6.imageshack.us/img6/9470/sprymenubardownhover.gif);background-repeat: no-repeat;background-position: 95% 50%;}ul.MenuBarHorizontal ul a.MenuBarItemSubmenu{background-image: url(http://img6.imageshack.us/img6/5549/sprymenubarright.gif);background-repeat: no-repeat;background-position: 95% 50%;}ul.MenuBarHorizontal a.MenuBarItemSubmenuHover{background-image: url(http://img6.imageshack.us/img6/9470/sprymenubardownhover.gif);background-repeat: no-repeat;background-position: 95% 50%;}ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover{background-image: url(http://img6.imageshack.us/img6/5549/sprymenubarright.gif);background-repeat: no-repeat;background-position: 95% 50%;}--></style><ul id="MenuBar1" class="MenuBarHorizontal"><li><a class="MenuBarItemSubmenu" href="#">Item 1</a><ul><li><a href="link do Item 1.1">Item 1.1</a></li><li><a href="link do Item 1.2">Item 1.2</a></li><li><a href="link do Item 1.3">Item 1.3</a></li></ul></li><li><a href="#">Item 2</a></li><li><a class="MenuBarItemSubmenu" href="#">Item 3</a><ul><li><a href="link do Item 3.1">Item 3.1</a> </li><li><a href="link do Item 3.2">Item 3.2</a></li><li><a href="link do Item 3.3">Item 3.3</a></li></ul></li><li><a href="#">Item 4</a></li></ul><p><script src="http://acessoriosparablogs.com.br/scripts/submenu.js" type="text/javascript"></script><script type="text/javascript"><!--var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"http://img6.imageshack.us/img6/5549/sprymenubarright.gif", imgRight:"http://img6.imageshack.us/img6/9470/sprymenubardownhover.gif"});//--></script>Vamos falar sobre o item 1, isso e o texto que vai aparecer no seu blog, o link dele e daquele jeito mesmo so um sinal de jogo da velha, os subitens e so trocar onde esta Item 1.1 pelo titulo que desejar e colocar a url no lugar indicado na mesma linha, e assim por diante em todos os outros links.Voce deve colocar esse codigo onde aparecera o menu horizontal com submenu, lembre-se que se o espaco (largura) do seu blog nao for suficiente para o menu completo um ou mais itens vao para linha debaixo, portanto e preciso ter cuidado com o numero de itens e a largura do botao para alterar a largura de cada botao mude o valor 150px, veja no codigo ele aparece 4 vezes width: 150px; voce deve mudar esse numero em todos, ou seja, se colocar 130px tem que alterar nos 4 lugares que aparece o 150.Para mudar as cores, letras, fundo e tudo mais dos botoes e nesta parte do codigo:ul.MenuBarHorizontal a{background-color: #6633FF;border-top: 1px solid #FFFFFF;color: #FFFFFF;border-right: 1px solid #0000CC;border-bottom: 1px solid #0000CC;border-left: 1px solid #FFFFFF;font-size: 120%;text-decoration: none;padding-top: 5px;padding-bottom: 4px;width: 150px;display: block;text-align: center;font-family: Arial, Helvetica, sans-serif;}E o estilo quando o mouse esta sobre ele e aqui:ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus{background-color: #FFCC99;background-image: url(http://img16.imageshack.us/img16/122/overc.gif);color: #000000;letter-spacing: normal;word-spacing: normal;border-top: 1px solid #FFFF00;border-right: 1px solid #CC0000;border-bottom: 1px solid #CC0000;border-left: 1px solid #FFFF00;}Veja aqui uma demostracao do menu com sub menu. Para fazer modificacoes nos botoes e como se fosse qualquer outra coisa feita em CSS, entao veja nossas dicas sobre: