Html CSS下拉菜单小问题

我是css的新手，我正在做自己的网站来学习它。我花了两天时间尝试了很多建议，但我承认我现在陷入了困境。问题是我的菜单有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 -->

感谢所有愿意帮助我的人

[更新]

谢谢各位。两个例子都有效。如果你们中的任何一位能够为我指出正确的方向，让下一个div元素保持在适当的位置（两个示例都将其向下移动），那么我就可以很高兴地走上这条路了。

---

谢谢

对于您的

LI

在

#菜单中

使用
左：0

。。。一切都会好起来的。
正在工作的一个：

我做了一些更改，主要是位置、显示、浮动等。
我在JSFIDLE上模拟了一个简化的示例来演示


这是代码

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>

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

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