Html 具有子菜单但父链接未保持活动状态的垂直菜单

我一直在用css重做一个垂直菜单，正如下面的代码所示，我似乎无法使第一个菜单选项在第一个子菜单选项上保持活动状态，而第一个和第二个菜单选项在第三个子菜单上保持活动状态

请问我这里缺什么

我也一直在尝试让它在所有浏览器中使用不同的黑客。如果不是所有浏览器，我如何使它适用于大多数浏览器？限制在哪里

下面是我写的css：

#nav li a {
    display:block;
    width:250px;
    height:30px;
    color:#FFF;
    background-color: #33b4d4;
    text-decoration:none;
    font-size:1em;
    line-height:1.8em;
    font-weight:bold;
    border:1px solid #000;
    text-indent:20px;
}

#nav li a:hover {
    display:block;
    color:#33b4d4;
    background-color: #FFF;
}

#nav ul.menu {
    display:block;
    width:250px;
    margin:0;
    padding:0;
    list-style-type: none;
}
#nav ul.menu > li, #nav ul.menu ul > li , #nav ul.menu ul > li > ul > li {
    float: left;
    display:block;
    width:250px;
    height:30px;
    background-color: #33b4d4;
    text-indent:20px;
}
#nav ul.menu ul ul li {
  float: none;
}
#nav li > ul {
  display: none;
}
#nav li:hover > ul {
    position: absolute;
    display:block;
    width:250px;
    padding:0;
    margin-top:-22px;
    margin-left:220px;
}

以下是菜单：

        <div id="nav">
            <ul class="menu">
                <li><a href="/" title="">Home</a></li>
                <li>
                    <a href="/" title="">Home</a>
                    <ul class="sub-menu">
                        <li><a href="/" title="">Home</a></li>
                        <li><a href="/" title="">Home</a></li>
                    </ul>
                </li>
                <li><a href="/" title="">Home</a></li>
                <li><a href="/" title="">Home</a></li>
                <li>
                    <a href="/" title="">Home</a>
                    <ul class="sub-menu">
                        <li><a href="/" title="">Home</a></li>
                        <li>
                            <a href="/" title="">Home</a>
                            <ul class="sub-menu">
                                <li><a href="/" title="">Home</a></li>
                                <li><a href="/" title="">Home</a></li>
                                <li><a href="/" title="">Home</a></li>
                            </ul>
                        </li>
                        <li><a href="/" title="">Home</a></li>
                        <li>
                            <a href="/" title="">Home</a>
                            <ul class="sub-menu">
                                <li><a href="/" title="">Home</a></li>
                                <li><a href="/" title="">Home</a></li>
                                <li><a href="/" title="">Home</a></li>
                                <li><a href="/" title="">Home</a></li>
                            </ul>
                        </li>
                        <li><a href="/" title="">Home</a></li>
                    </ul>
                </li>
                <li><a href="/" title="">Home</a></li>
                <li><a href="/" title="">Home</a></li>
                <li><a href="/" title="">Home</a></li>
                <li><a href="/" title="">Home</a></li>
            </ul>

致：

---

但现在父链接保持活动状态，但所有子菜单链接也同时处于活动状态。我遗漏了什么？

您应该更改li:hover上的链接颜色

#nav li:hover > a {
    display:block;
    color:#33b4d4;
    background-color: #FFF;
}

---

谢谢。它让我发疯！！！这是可行的，但我不知道出了什么问题。谢谢。你如何让第一类（家长）有不同的背景呢？没关系。我已经弄明白了。谢谢

#nav ul.menu > li:hover a {
    display:block;
    color:#33b4d4;
    background-color: #FFF;
}

#nav li:hover > a {
    display:block;
    color:#33b4d4;
    background-color: #FFF;
}