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。