Html 菜单项之间的间距（CSS）

我有一个可以在大屏幕上使用的菜单，但是当浏览器的宽度减小（菜单换行）时，我无法让菜单项彼此重叠

HTML:

---

如果您能提供帮助，谢谢。

尝试添加

显示：内联块至
。菜单

.menu { 
    font-family:Verdana;
    font-size: 12px;
    color: #000000;
    text-align: center;
    text-decoration: none;
    border: #B1B1B1 solid; 
    border-width: 0px 1px 0px 0px;
    padding: 10px 17px 10px 12px;
    display:inline-block;
}

显示：内联块；请添加并测试此属性。
如果我来晚了，您也可以将
行高设置为32。因为您的
字体大小是12px加上2倍10px的填充。
请检查我的答案。这解释了为什么会发生这种情况。是的，雷基尔，这从某种角度解释了为什么它会这样做，并帮助了我，谢谢。
.menu {
    font-family: Verdana;
    font-size: 12px;
    color: #000;
    text-align: center;
    text-decoration: none;
    border: #B1B1B1 solid;
    border-width: 0 1px 0 0;
    padding: 10px 17px 10px 12px;
}

.menu:link,.menu:visited {
    background-color: #E5E5E5;
}

.menu:hover,.menu:active {
    background-color: #F9C232;
}

.menu { 
    font-family:Verdana;
    font-size: 12px;
    color: #000000;
    text-align: center;
    text-decoration: none;
    border: #B1B1B1 solid; 
    border-width: 0px 1px 0px 0px;
    padding: 10px 17px 10px 12px;
    display:inline-block;
}