奇怪的填充菜單無序列表 - 無法刪除

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