我的菜单上有一个非常奇怪的填充。填充出现在菜单按钮的顶部和二级菜单按钮的下方。
我已经尝试了各种边距、边框和填充的组合，但我就是无法摆脱这种额外的颜色！
*请注意：人们推荐（并删除了他们的评论）我删除了 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;
}
我提前感谢您的帮助！