我的菜单上有一个非常奇怪的填充物。填充显示在菜单按钮顶部和第二级菜单按钮下方。
我已尝试过各种边距，边框和填充的组合，但我无法摆脱这些额外的颜色！
*只是一个注意：人们推荐（并删除了他们的评论）我删除了CSS：
margin-top: -0.5em;
但是，如果可能的话，我希望保持这种状态。*
不幸的是，我无法发布图片，因为我需要更多的声望点（我是一个新的编码，甚至更新的Stackoverflow），但如果有人可以看看下面的代码，看看我哪里出错了会很棒！
我的HTML代码：
<ul id="menu" >
<li style="margin-left: 3em;"><a href="#">Home</a></li>
<li class="sub">
<a href="#">Our Services</a>
<ul>
<li><a href="#">Solar PV</a></li>
<li><a href="#">Air Tightness Testing</a></li>
<li><a href="#">Thermal Imaging</a></li>
<li><a href="#">Wind Turbines</a></li>
<li><a href="#">Energy Consultancy</a></li>
</ul>
</li>
<li><a href="#">Recent Projects</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
我的CSS代码：
#menu {
margin: 0;
padding: 0;
background: #201f5f;
height: 3em;
list-style: none;
font-family:arial;
}
#menu > li {
margin-right: 3em;
margin-top: -0.5em;
background:#201f5f;
vertical-align: bottom;
}
#menu > li > a {
height: 3em;
color: #ffffff;
text-decoration: none;
line-height: 3;
font-weight: bold;
text-transform: uppercase;
}
#menu > li > a:hover {
color: #41A044;
text-decoration: underline;
}
#menu > li.sub {
position: relative;
}
#menu > li.sub ul {
font-size:15px;
margin: 0;
padding: 0;
list-style: none;
background: #000000;
position: absolute;
top: -1000em;
width: 649px;
left:-87px;
}
#menu > li.sub ul li {
display: inline-block;
}
#menu > li.sub ul li a {
height: 100%;
display: inline;
float: left;
padding-left: 0.4em;
padding-right: 0.4em;
padding-top: 0;
padding-bottom: 0;
color: #fff;
font-weight: bold;
text-decoration: none;
}
#menu > li.sub ul li a:hover {
background: #41A044;
text-decoration: underline;
position: relative;
}
#menu > li.sub:hover ul {
top: 2.15em;
}
#menu{
text-align:center;
}
li{
display:inline-block;
}
我事先感谢你的帮助！