CSS下拉菜單 - 不對齊正確

Question

退房列表項JSFiddel Here

我有一個基於下拉菜單中的CSS下拉懸停但是懸停顯示的所有名單都在相同的位置，而不是菜單項下他們與...相關聯。我相信問題在於這部分代碼...

#menu ul li { 
} 

但即使當我編輯這個並帶走浮動我似乎無法弄清楚。也許有人可以指出我犯的錯誤。先謝謝您的幫助。

CSS

#menu ul { 
font-family: Arial, Verdana; 
font-size: 14px; 
margin: 0; 
padding: 0; 
list-style: none; 
} 
#menu li { 
display: inline; 
} 
#menu ul li { 
display: block; 
position: relative; 
float: left; 
} 
#menu li ul { 
display: none; 
} 
#menu ul li a { 
display: block; 
text-decoration: none; 
color: #ffffff; 
border-top: 1px solid #ffffff; 
padding: 5px 15px 5px 15px; 
background: #1e7c9a; 
margin-left: 1px; 
white-space: nowrap; 
} 
#menu ul li a:hover { 
background: #3b3b3b; 
} 
#menu li:hover ul { 
display: block; 
position: absolute; 
} 
#menu li:hover li { 
float: none; 
font-size: 11px; 
} 
#menu li:hover a { background: #3b3b3b; } 
#menu li:hover li a:hover { 
background: #1e7c9a; 
} 

HTML

<ul id="menu"> 
<li><a href="#">Find Us</a> 
<ul> 
<li><a href="#">Web Design</a></li> 
<li><a href="#">Graphic Design</a></li> 
<li><a href="#">Logo Design</a></li> 
<li><a href="#">Blog Design</a></li> 
</ul> 
</li> 
<li><a href="#">Our Menu</a> 
<ul> 
<li><a href="#">This is a project</a></li> 
<li><a href="#">So is this</a></li> 
<li><a href="#">and this</a></li> 
<li><a href="#">don't forget this too</a></li> 
</ul> 
</li> 
<li><a href="#">Our Story</a> 
<ul> 
<li><a href="#">Support</a></li> 
<li><a href="#">Quote</a></li> 
<li><a href="#">General Enquiry</a></li> 
</ul> 
</li> 
</ul> 

Answer 1

http://jsfiddle.net/UfpCm/1/

上#menu li使用inline-block。