Question: i have this menu:

```
<div class="nav">
    <ul>
        <li><a href="#">HOME</a></li>
        <li><a href="#">AMORTECIMENTO</a></li>
    </ul>
</div>

```

the normal apearance:

![normal apearance](https://i.stack.imgur.com/kotti.png)

and this is the apearance when users hover the menu:

![:hover apearance](https://i.stack.imgur.com/Ooari.png)

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...

```
.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;
}

```

My intention is, when user hover the menu item, on the `<li>` background, apear the basketball, and on `<a>` tag, the background is going to #FFF but i have small and big names on menu, so i can't set width of `<li>` and `<a>` tags... i think

Answer: 
Just set a hover background. Eg:

```
div.nav li:hover{
  background-image: url('basketball.jpg');
}

```

EDIT:
You've got a lot more issues than just a background image... 

* You need to vertically center your nav text set a min-width for the
nav cells so that the left and right of the ball aren't cut off
* set a solid white background for the anchor tag so the text is actually visible on hover
* set a z-index for the anchor tags that's greater
than the center image so that they are all clickable (right now you
can't click the link to the right of the center)

Good luck. I can't write all of that code out for you, but that should send you in the right direction.
on your nav class all you have to do is write your css like this:

```
.nav ul li:hover
{ 
background-image:url('yourimage.jpg');
}

```