Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Olá pessoal, estou com um problema com meu menu...
ele da um pau quando eu passo o mouse - isso no FF
ele fica sempre com pau - isso no IE
o erro que está ocorrendo é esse, isso vendo no FF, se fosse no IE iria ficar tudo daquele geito, lá vai:
http://img47.imageshack.us/img47/2964/assimhp5.gif
Mais ok, vou passar o código e a imagem para vocês darem uma olhadinha...
Está imagem será utilizada para o código CSS:
menu.gif
http://img230.imageshack.us/img230/592/menuki6.gif
código HTML:
<div id="menuNavBox"> <ul id="menuNav"> <li id="menu1"><a class="current" href="">HOME</a></li> <li id="menu2"><a href="">TRABALHOS</a></li> <li id="menu3"><a href="">COMENTÁRIOS</a></li> <li id="menu4"><a href="">LINKS</a></li> <li id="menu5"><a href="">LINKS</a></li> <li id="menu6"><a href="">LINKS</a></li> <li id="menu7"><a href="">LINKS</a></li> <li id="menu8"><a href="">LINKS</a></li> <li id="menu9"><a href="">CONTATO</a></li> </ul> </div>
código CSS:
#menuNavBox a { color: #FFFFFF; font-family: Arial; font-size: 10px;}#menuNavBox a:hover { border: 0px none;}#menuNavBox a.current { color: #000000;}#menuNavBox { width: 770px; height: 40px; margin: auto; padding: 12px 0px 0px 0px;}#menuNavBox ul { display: block; list-style: none; background: url("images/menu.gif") top left no-repeat; margin: 0; padding: 0; width: 770px; height: 40px; }#menuNavBox ul li { float: left; position: relative; z-index: 100; margin: 0; padding: 0; width: 85px; height: 40px;}#menuNavBox li a { display: block; text-decoration: none; width: 85px; height: 40px;}#menuNavBox ul li a:hover, #menuNavBox ul li a.current { background-image: url("images/menu.gif"); background-repeat: no-repeat;}/ Menu 1 /#menuNavBox ul li#menu1 a { padding: 12px 0px 0px 0px; text-align: center; }#menuNavBox ul li#menu1 a:hover { background-position: 0px -40px;}#menuNavBox ul li#menu1 a.current { background-position: 0px -80px;}/ Menu 2 /#menuNavBox ul li#menu2 a { padding: 12px 0px 0px 0px; text-align: center; }#menuNavBox ul li#menu2 a:hover { background-position: -85px -40px;}#menuNavBox ul li#menu2 a.current { background-position: -85px -80px;}/ Menu 3 /#menuNavBox ul li#menu3 a { padding: 12px 0px 0px 0px; text-align: center; }#menuNavBox ul li#menu3 a:hover { background-position: -170px -40px;}#menuNavBox ul li#menu3 a.current { background-position: -170px -80px;}/ Menu 4 /#menuNavBox ul li#menu4 a { padding: 12px 0px 0px 0px; text-align: center; }#menuNavBox ul li#menu4 a:hover { background-position: -255px -40px;}#menuNavBox ul li#menu4 a.current { background-position: -255px -80px;}/ Menu 5 /#menuNavBox ul li#menu5 a { padding: 12px 0px 0px 0px; text-align: center; }#menuNavBox ul li#menu5 a:hover { background-position: -340px -40px;}#menuNavBox ul li#menu5 a.current { background-position: -340px -80px;}/ Menu 6 /#menuNavBox ul li#menu6 a { padding: 12px 0px 0px 0px; text-align: center; }#menuNavBox ul li#menu6 a:hover { background-position: -425px -40px;}#menuNavBox ul li#menu6 a.current { background-position: -425px -80px;}/ Menu 7 /#menuNavBox ul li#menu7 a { padding: 12px 0px 0px 0px; text-align: center; }#menuNavBox ul li#menu7 a:hover { background-position: -510px -40px;}#menuNavBox ul li#menu7 a.current { background-position: -510px -80px;}/ Menu 8 /#menuNavBox ul li#menu8 a { padding: 12px 0px 0px 0px; text-align: center; }#menuNavBox ul li#menu8 a:hover { background-position: -595px -40px;}#menuNavBox ul li#menu8 a.current { background-position: -595px -80px;}/ Menu 9 /#menuNavBox ul li#menu9 a { padding: 12px 0px 0px 5px; / Para deixar os 5px correto de acordo com o texto / text-align: center; }#menuNavBox ul li#menu9 a:hover { padding: 12px 0px 0px 0px; / Para deixar os 5px correto de acordo com o texto / text-align: center; background-position: -685px -40px; margin: 0px 0px 0px 5px; / Para deixar certo a borda. Pois é de 85 em 85px, e como o tamanho é 770px, em 9 partes sobra 5px /}#menuNavBox ul li#menu9 a.current { background-position: -685px -80px; margin: 0px 0px 0px 5px; / Para deixar certo a borda. Pois é de 85 em 85px, e como o tamanho é 770px, em 9 partes sobra 5px /}
Certo, quem poderia me ajudar eu seria muito grato.
Obrigado desde já!
Carregando comentários...