HTML CSS Formatting a menu block/hover background -

HTML CSS Formatting a menu block/hover background -

i know 'correct' way alter current menu, looks this: this:

the problem have making buttons these blocks alter background on hover, , vertical alignment, utilize 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>

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

because want center vertically <a> , there many way can search on google there's many tuto.

the solution give create line-height equal heigh (55px). solution work when text on 1 line.

and hover create <a> display: inline-block; , replace margin 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 fiddle

html css menu hover block