HTML CSS Formatting a menu block/hover background

Question

I would like to know what is the 'correct' way to change my current menu, that looks like this:
to this:

The problem I have is making the buttons into these blocks that would change background on hover, and the vertical alignment, do I use padding? blocks? table? Help :S

(The color doesn't matter)

CSS:

.menu{
        clear: both;
        background-image:url(meniuBG.jpg);
        height:55px;
        line-height: 10px;
      }

.menu a{

        text-align: center;
        text-decoration: none;
        font-style:italic;
        color:rgb(193,193,193);
        margin-right: 25px;
        margin-left: 25px;
    }

HTML (for no apparent reason):

<div class="meniu">

        <a href="#">NAUJIENOS</a>
        <a href="#">KREPSINIO VADOVAS</a>
        <a href="#">TRENIRUOTES</a>
        <a href="#">IDOMYBES</a>
        <a href="#">GALERIJA</a>
        <a href="#">APIE MUS</a>

</div>

Answer 1

.menu {
        ...
        height:55px;
        /* line-height: 10px;  delete this  */
}

.menu a { 
        ...
        line-height: 55px; /* add this */
}

Because you want to center vertically your <a> , there is many way to do this you can search on google there's many tuto.

the solution i give you is to make line-height equal to the heigh (55px). this solution work when your text is just on one line.

and for the hover just make <a> display: inline-block; and replace margin with padding

.menu a{

text-align: center;
text-decoration: none;
font-style: italic;
color: rgb(193,193,193);
/* margin-right: 25px; */
/* margin-left: 25px; */
padding: 0 25px;
line-height: 55px;
display: inline-block;

}

here's a FIDDLE