Boa tarde galera!!! Estou montando um menu pro meu site, infelizmente tenho conhecimentos meio limitados... rssr o comando hover não esta funcionando como deveria na barra de baixo... a ideia que permaneça a imagem e só quando passa-se o mouse ele daria um brilho apenas... como no de cima. segue o link como demonstrativo... http://strikelanhouse.com.br/teste/barrateste.html segue o script abaixo: @charset "utf-8"; /* CSS Document */ body{ margin: 0 auto 0 auto; padding: 0 0; } #todo{ margin: 0 auto 0 auto; width: 1000px; height:auto; position:relative; padding: 0 0; background: } #fundo{ background: url(../imagens/fundoazulclaro.png); padding: 0 0; margin: 0 auto 0 auto; width:1000px; height:1500px; position:absolute; } /*** topo ***/ #topo{ margin: 0 auto 0 auto; padding:0 0; width:1000px; height:245px; position:absolute; left: 0px; } /*** menu superior ***/ #menusuper{ width:1000px; height:40px; top:0px; left:0px; } /*** barra superior ***/ #wrapper { display: block; width: 1000px; height:40px; margin: 0px auto; font: 100%/1.25 arial, helvetica, sans-serif; color: #000000; } /*** formato menu ***/ #memu{ display: block; text-align: center; font-size: 120%; text-decoration: none; position:absolute; } #menu ul { width: 1000px; /*** ajustar valor se texto menor / maior (tamanho total da pagina) ***/ height: 40px; margin: 0 auto; padding: 0; line-height: 40px; /*** centraliza o texto na vertical na mesma altura ***/ text-decoration: none; background:url(../imagens/menu_bg.jpg) repeat-x left top; } /*Left Corner*/ #menu ul li.left { display: block; float: left; clear: left; width: 100px; height: 40px; background:url(../imagens/menu_l.jpg) no-repeat left top; } /*Right Corner*/ #menu ul li.right { display: block; float: right; clear: right; width: 40px; height: 40px; background:url(../imagens/menu_r.jpg) no-repeat right top; } #menu ul li { width: auto; display: inline; float: left; list-style: none; text-align: center; text-decoration: none; } #menu ul li a { display: block; text-decoration: none; text-transform: inherit; padding: 0 25px; color: #CCCCCC; } #menu ul li em { display: block; float: left; width: 2px; height: 40px; background:url(../imagens/menu_sep.jpg) no-repeat left top; } /*** ultimo separador ***/ /*** Sera add um separador no ultimo link ***/ #menu ul li.sep { width: 2px; background:url(../imagens/menu_sep.jpg) no-repeat left top; } #menu ul li a:hover, #menu ul li a:active { background: url(../imagens/menu_over.jpg) repeat-x center top; text-decoration: none; Color: white; } #menu ul li a:active { font-weight: bold; cursor: default; } /*** logotipo ***/ #logo{ width:1000px; height:135px; top:50px; left:0px; position:absolute; alignment-adjust:central; } #logotipo{ width:760px; height:135px; top:0px; left:120px; position:absolute; alignment-adjust: central; /*background:url(../imagens/logo_strike.png) no-repeat center;*/ } /*** menu inferior ***/ #infmenu{ width:1000px; height:40px; top:195px; left:0; position:absolute; } /****** menu inferior *****/ #wrapperinf{ display: block; width: 1000px; height:40px; color: #000000; } #menuinf{ display: block; text-align: center; font-size: 120%; text-decoration: none; position:absolute; float:right; top:0px; left:0px; } #menuinf ul { width: 1000px; /*** ajustar valor se texto menor / maior (tamanho total da pagina) ***/ height: 40px; margin: 0px auto; padding: 0; line-height: 40px; /*** centraliza o texto na vertical na mesma altura ***/ text-decoration: none; background:url(../imagens/menu_bg.jpg) repeat-x left top; } /*** lado esquerdo ***/ #menuinf ul li.leftinf { display: block; float: left; clear: left; width: 105px; height: 40px; background:url(../imagens/menu_l.jpg) no-repeat left top; } /*** lado direito ***/ #menuinf ul li.rightinf { display: block; float: right; clear: right; width: 40px; height: 40px; background:url(../imagens/menu_r.jpg) no-repeat right top; } #menuinf ul li { width: auto; display: inline; float: left; list-style: none; text-align: center; text-decoration: none; } #menuinf ul li a { display: block; text-decoration: none; text-transform: inherit; padding: 04px 33px; color: #CCCCCC; } #menuinf ul li em { display: block; float: left; width: 2px; height: 40px; background:url(../imagens/menu_sep.jpg) no-repeat left top; } /*** ultimo separador ***/ /*** Sera add um separador no ultimo link ***/ #menuinf ul li.sepinf { width: 2px; background:url(../imagens/menu_sep.jpg) no-repeat left top; } #menuinf ul li a:hover, #menuinf ul li a:active { background: url(../imagens/menu_over.jpg) repeat-x center top; text-decoration: none; Color: white; } #menuinf ul li a:active { font-weight: bold; cursor: default; } /*** get ***/ .orkut{ width:32px; height:32px; background: url(../imagens/orkut_get.png) no-repeat; background-position: center; } #menuinf ul li a:hover .orkut { width:32px; height:32px; background-image: url(../imagens/orkut_get.png) no-repeat; background-position: center; } .MSN{ width:32px; height:32px; background: url(../imagens/msn_get.png) no-repeat; background-position: center; } .face{ width:32px; height:32px; background: url(../imagens/face_get.png) no-repeat; background-position: center; } .twitter{ width:32px; height:32px; background: url(../imagens/twitter_get.png) no-repeat; background-position: center; } .myspace{ width:32px; height:32px; background: url(../imagens/myspace_get.png) no-repeat; background-position: center; } .youtube{ width:32px; height:32px; background: url(../imagens/youtube_get.png) no-repeat; background-position: center; } .sinuca{ width:32px; height:32px; background: url(../imagens/sinuca_yahoo_get.png) no-repeat; background-position: center; } .tempo{ width:32px; height:32px; background: url(../imagens/tempo_get.png) no-repeat; background-position: center; } /*** clear ***/ #clear{ clear:both; } /***IE hack***/ <!--[if IE]> <style type="text/css"> p.iepara{ /*Conditional CSS- For IE (inc IE7), create 1em spacing between menu and paragraph that follows*/ padding-top: 1em; } </style> <![endif]--> html <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>barra</title> <link rel="stylesheet" href="stylo/all.css" type="text/css" /> </head> <body> <div id="todo"> <div id="fundo"> <div id="topo"> <div id="menusuper"> <div id="wrapper"> <div id="menu"> <ul> <li class="left"> </li> <li><em></em><a href="#">Home</a></li> <li><em></em><a href="#">Loja</a></li> <li><em></em><a href="#">Jogos Online</a></li> <li><em></em><a href="#">Jogos Rede</a></li> <li><em></em><a href="#">Serviços</a></li> <li><em></em><a href="#">Sobre Nós</a></li> <li><em></em><a href="#">Contato</a></li> <li class="sep"> </li> <li class="right"> </li> </ul><!--/ul--> </div><!--/menu--> </div><!--/wrapper--> </div><!--/menu superior--> <div id="logo"> <div id="logotipo"></div><!--/logotipo--> </div><!--/logo--> <div id="infmenu"> <div id="wrapperinf"> <div id="menuinf"> <ul> <li class="leftinf"> </li> <li><em></em><a href="http://orkut.com.br/" class="orkut"></a></li> <li><em></em><a href="http://hotmail.com/" class="MSN"></a></li> <li><em></em><a href="http://www.facebook.com/" class="face"></a></li> <li><em></em><a href="http://twitter.com/" class="twitter"></a></li> <li><em></em><a href="http://br.myspace.com/" class="myspace"></a></li> <li><em></em><a href="http://youtube.com/" class="youtube"></a></li> <li><em></em><a href="http://br.play.yahoo.com/games/login?game=Pool" class="sinuca"></a></li> <li><em></em><a href="http://tempoagora.uol.com.br/previsaodotempo.html/brasil/PraiaGrande-SP/" class="tempo"></a></li> <li class="sepinf"> </li> <li class="rightinf"> </li> </ul> <!--/ul--> </div><!--/menuinf--> </div><!--/wrapperinf--> </div><!--/infmenu--> </div><!--/topo--> </div><!--/fundo--> </div><!--/todo--> </body><!--/body--> </html><!--/hmtl-->
