CSS下拉菜單小問題

Question

我是全新的CSS，我正在做我自己的網站來學習它。已經有2天的時間嘗試了很多建議，但我承認我現在被卡住了。問題是我有一個包含4個項目的菜單。第二項應該是懸停下拉。當我懸停時，下拉項目出現在第三個菜單項下。我不知道它的CSS或HTML /也許專家可以解決這1分鐘？ 有問題的代碼如下

HTML 
<div id="menu"> 
<ul> 
    <li><a href="#">Home</a></li> 
    <li><a href="#">Products</a> 
    <ul> 
    <li><a href"#">Product 1</a></li> 
    <li><a href"#">Product 2</a></li> 
    </ul> 
    </li> 
    <li><a href="#">About</a> 
    <li><a href="#">Contact</a> 
</ul> 
</div> 
<!-- end div#menu --> 

而CSS

/* Menu */ 

#menu { 
width: 940px; 
height: 47px; 
margin: 0 auto; 
background: url(images/img02.jpg) repeat-x left top; 
} 

#menu ul { 
margin: 0; 
padding: 0; 
list-style: none; 
line-height: normal; 
margin-left: 0px; 
} 

#menu li { 
display: inline; 
text-align: center; 
position:relative; 
} 

#menu a { 
display: block; 
float: left; 
width: 100px; 
height: 32px; 
margin-right: 2px; 
padding: 15px 20px 0px 20px; 
text-decoration: none; 
text-align: center; 
text-transform: uppercase; 
font-size: 12px; 
font-weight: bold; 
color: #3CF; 
} 

#menu a:hover, #menu .active a { 
background: #000000; 
color: #FFFFFF; 


} 

#menu ul ul { 
position:absolute; 
visibility:hidden; 
top:30px; 
left: 100%; 
width: 100%; 

} 

#menu ul li a { 

text-align:center; 

} 

#menu ul li:hover ul { 
display:block; 
position:absolute; 
visibility:visible; 
position:absolute; 
background: #000000; 
color: #FFFFFF; 


} 

由於任何人誰願意幫我出！

[UPDATE]

謝謝你們。這兩個提供的例子都有效如果你們中的任何一個人都可以指出我正確的方向來保持下一個div元素的位置（這兩個例子都將它向下滑動），那麼我可以愉快地走上前去。 thx！

Answer 1

使用float:left，而不是display:inline您LI

在#menu ul ul

使用left:0

...一切都會好起來的。

Answer 2

工作之一：http://jsfiddle.net/XbHxL/

我做了一些改動，主要與立場，顯示，漂浮等

Answer 3

我已經嘲笑了上的jsfiddle一個簡單的例子來證明......

http://jsfiddle.net/Sohnee/HYNxd/2/

這是代碼。

HTML

請注意，你已經錯過了一些關閉標籤，也有一些跡象=你的錨。

<div id="menu"> 
    <ul> 
     <li><a href="#">Home</a></li> 
     <li><a href="#">Products</a> 
      <ul> 
       <li><a href="#">Product 1</a></li> 
       <li><a href="#">Product 2</a></li> 
      </ul> 
     </li> 
     <li><a href="#">About</a></li> 
     <li><a href="#">Contact</a></li> 
    </ul> 
</div> 

CSS

#menu ul li { 
    display: block; 
    float: left; 
} 

#menu ul li ul { 
    display: none; 
    position: absolute; 
} 

#menu ul li ul li { 
    display: block; 
    float: none; 
} 

#menu ul li:hover ul { 
    display: block; 
} 

#menu a { 
    display: block; 
    padding: 0.4em 1.2em; 
    text-decoration: none; 
    color: #3CF; 
    text-align: center; 
    text-transform: uppercase; 
    font-size: 12px; 
    font-weight: bold; 
} 

#menu a:hover { 
    color: White; 
    background-color: #3CF; 
}