i have this menu:\[code\]<div class="nav"> <ul> <li><a href="http://stackoverflow.com/questions/12733600/#">HOME</a></li> <li><a href="http://stackoverflow.com/questions/12733600/#">AMORTECIMENTO</a></li> </ul></div>\[/code\]the normal apearance:
and this is the apearance when users hover the menu:
So, i dont know how to setup the css, assuming i have biggest names on menu like: "AMORTECIMENTO"Any tips??i have tried this, but on small names, the menu is cutting the background...\[code\].nav ul li a{ display:block; font-size:15px; color:#000; padding:5px 7px; background:transparent; text-decoration:none;}.nav ul li:hover{ background:url(../imagens/bola_fundo_menu.png) center no-repeat;}\[/code\]My intention is, when user hover the menu item, on the \[code\]<li>\[/code\] background, apear the basketball, and on \[code\]<a>\[/code\] tag, the background is going to #FFF but i have small and big names on menu, so i can't set width of \[code\]<li>\[/code\] and \[code\]<a>\[/code\] tags... i think