子菜单中元素之间的空格

Question

我正在制作网站，我的子菜单有问题 子菜单中的<li>元素之间有空格。这是我网上的一张照片

当我尝试点击营养时，子菜单消失。

这是我的代码：

ul#menu, ul#menu ul.sub-menu {
    padding:0px;
    margin: 0px;
}

ul#menu li ul.sub-menu {
    display:none;
    position: absolute;
    top: 63px;
    left: -140px;
    background-color: #372412;
}

ul#menu li ul.sub-menu {
    background:#5f3e1b;
    color: #372412;
    height:30px;
}

ul#menu li ul.sub-menu a{
    background-color:#5f3e1b ;
    color: white;
    height:40px;
    padding-top:0px;
    border-top: 1px solid #4A3903;
}

代码很乱，因为我尝试了解决问题的所有方法，但我不能。