CSS drop down menu minor problem

I'm brand new to css and I'm doing my own website to learn it. It's been 2 days of trying many suggestions but I admit I'm now stuck. The problem is that I have a menu with 4 items. The 2nd item should be a drop down on hover. When I hover, the drop down items appear under the 3rd menu item. I dont know if its the css or html/ Perhaps an expert can solve this 1 minute? The offending code is below

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

And the 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;


}

Thanks to anyone who wishes to help me out!

[UPDATE]

Thanks guys. Both supplied examples worked. If any of you can point me in the right direction as to keeping the next div element in place (both examples scooched it downward) then I can happily be on my way. thx!

Use float:left instead of display:inline for your LI

in #menu ul ul

Use left:0

... and all will be fine.

working one: http://jsfiddle.net/XbHxL/

I've made few changes, mostly with positions, display, float etc.

I have mocked up a simplified example on JSFiddle to demonstrate...

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

Here is the code.

HTML

Please note that you had missed some closing tags, and also some = signs in your anchors.

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