CSSドロップダウンメニューのマイナーな問題

Question

私はCSSの新機能です。私はそれを学ぶために自分のウェブサイトをやっています。多くの提案を試みるのは2日間でしたが、私は今は固執しています。問題は、私は4項目のメニューがあることです。 2番目の項目は、ホバー上のドロップダウンでなければなりません。マウスを動かすと、ドロップダウン項目が3番目のメニュー項目の下に表示されます。私は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

あなた LI

使用left:0

#menu ul ul中のため

利用float:left代わりのdisplay:inline ...とすべてが罰金になります。

Answer 2

つの作業：私は主に位置、ディスプレイと、いくつかの変更を加えましたhttp://jsfiddle.net/XbHxL/

、フロートなど私が実証するJSFiddleに簡略化した例を嘲笑している

Answer 3

...

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; 
}