HTML CSS格式化菜单块/悬停背景

我想知道更改当前菜单的“正确”方式是什么：
为此：

我遇到的问题是将按钮做成这些块，这样会改变悬停时的背景，垂直对齐，我是否使用填充？阻碍？桌子帮助：S

（颜色不重要）

CSS:

HTML（无明显原因）：

因为您想垂直居中，所以请尝试添加此项

.menu a{
    text-align: center;
    text-decoration: none;
    font-style:italic;
    color:rgb(193,193,193);
    margin-right: 25px;
    margin-left: 25px;
    line-height:55px;
    display: inline-block;
}
.menu a:hover{
    background-color: #E7550C;
}

---

你能贴一把小提琴吗？当然可以，但是它没有背景图片，我不知道它是否有任何用处：实际上在这里：我添加了黑/红框，而不是图片中的背景。知道了，这似乎使它对齐，但是悬停呢？现在它只高亮显示文本：如果我使用“a”内联块，它会垂直高亮显示所有文本，但不会高亮显示边。我使用了“显示：内联块”和左右填充10px，它看起来像现在的示例一样工作，谢谢！）对你很好如果你想看的话我也会更新我的答案

<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 this  */
}

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

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

}

.menu a{
    text-align: center;
    text-decoration: none;
    font-style:italic;
    color:rgb(193,193,193);
    margin-right: 25px;
    margin-left: 25px;
    line-height:55px;
    display: inline-block;
}
.menu a:hover{
    background-color: #E7550C;
}