奇怪的填充菜单无序列表 - 无法删除

Question

我的菜单上有一个非常奇怪的填充。填充显示在菜单按钮的顶部和第二级菜单按钮的下方。

我已经尝试过各种边距，边框和填充的组合，但我无法摆脱这种多余的颜色！

*刚一说明：人推荐的（和删除他们的评论）我删除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; 
} 

我感谢你提前为您的帮助！

Answer 1

我删除您设置了DEMO http://jsfiddle.net/gSCr4/4/

margin-top: -0.5em; //Removed