Html 使用CSS创建悬停下拉菜单

嘿，伙计们，我在一个网站上工作，该网站有一些链接，如主页、关于我们、联系我们、产品。现在，如果用户将鼠标悬停在products链接上，我希望它显示一个项目下拉列表，其中on selection指向相应的页面

以下是我的html部分：

    <ul id="menu">
        <li><a href="index.html" class="current"><span></span>Home</a></li>
        <li><a href="" target=""><span></span>CPPL Pharma</a></li>    
        <li><a href="" target=""><span></span>CPPL Vets</a></li>
        <li><a href="aboutus.html"><span></span>About Us</a></li>        
        <li><a href="contactus.html"><span></span>Contact Us</a></li>
    </ul>

示例HTML

<ul>
        <li>
            <a href="#">Item #1</a>
            <ul>
                <li><a href="">Sub-Item #1</a></li>
                <li><a href="">Sub-Item #2</a></li>
                <li><a href="">Sub-Item #3</a></li>
            </ul>
        </li>
        <li>
            <a href="#">Item #2</a>
            <ul>
                <li><a href="">Sub-Item #4</a></li>
                <li><a href="">Sub-Item #5</a></li>
                <li><a href="">Sub-Item #6</a></li>
            </ul>
        </li>
        <li>
            <a href="#">Item #3</a>
            <ul>
                <li><a href="">Sub-Item #7</a></li>
                <li><a href="">Sub-Item #8</a></li>
                <li><a href="">Sub-Item #9</a></li>
            </ul>
        </li>
    </ul>

---

我将编写一个javascript函数，它钩住HTML对象的

onMouseOver

事件，然后将列表显示为菜单。您可以操纵div的宽度和高度属性，更改其z索引或使用可见性属性。

当我将鼠标悬停在“关于我们”按钮上时，甚至会显示产品的子菜单！！这是我的问题截图的链接！！我想把第二类归入第一类！！！任何帮助都将不胜感激！！

<ul>
        <li>
            <a href="#">Item #1</a>
            <ul>
                <li><a href="">Sub-Item #1</a></li>
                <li><a href="">Sub-Item #2</a></li>
                <li><a href="">Sub-Item #3</a></li>
            </ul>
        </li>
        <li>
            <a href="#">Item #2</a>
            <ul>
                <li><a href="">Sub-Item #4</a></li>
                <li><a href="">Sub-Item #5</a></li>
                <li><a href="">Sub-Item #6</a></li>
            </ul>
        </li>
        <li>
            <a href="#">Item #3</a>
            <ul>
                <li><a href="">Sub-Item #7</a></li>
                <li><a href="">Sub-Item #8</a></li>
                <li><a href="">Sub-Item #9</a></li>
            </ul>
        </li>
    </ul>

ul > li {
    display:block;
    float:left;
    margin-right:10px;
    position:relative; 
    background:Red;
    padding:0.5em; 
    line-height:1em
}
ul ul {
    display:none;
    width:150px;
    position:absolute;
    top:2em;
    left:0;
}
ul ul > li {
    float:none;
}
ul > li:hover > ul,
ul > a:hover + ul {
    display:block;
}