當子LI懸停在上方時，如何保持除第一個LI之外的所有父項

Question

HTML：

<ul id="ulMenu">
    <li class="parent">
        <a href="">Software Update</a>
        <ul class="ulSubMenu">
            <li>
                <a href="">2010</a>
                <ul class="ulSubMenu">
                    <li>
                        <a href="">Version 1</a>
                        <ul class="ulSubMenu">
                            <li><a href="">Ver 1 Complete</a></li>
                            <li><a href="">Ver 1 Not Yet</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li>
                <a href="">2011</a>
                <ul class="ulSubMenu">
                    <li>
                        <a href="">Version 1</a>
                        <ul class="ulSubMenu">
                            <li><a href="">Ver 1 Complete</a></li>
                            <li><a href="">Ver 1 Not Yet</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

CSS：

ul.ulSubMenu > li > a:hover
{
      background-color: #008AAC;
      color: #C5F3FF;
}
.active {
    background-color: #008AAC;
    color: #C5F3FF;
}

jQuery的：

我想添加一個腳本，該腳本將除父LI之外的所有父LI設置為active的子菜單類

例如，如果我將鼠標懸停在2010年版下面的“ Ver 1 Complete”上，它將更改hover CSS的樣式。 我還想使與active版本1和2010 LI的類相同的樣式。

我怎樣才能做到這一點。

Answer 1

您應該只更改.active規則以應用於所有懸停的li元素。

ul.ulSubMenu li:hover,
.active {
    background-color: #008AAC;
    color: #C5F3FF;
}

這應該可以按您希望的方式工作，因為當您將鼠標懸停在某個元素上時，其所有父元素也會被懸停。

Answer 2

我將CSS更新為以下內容：

ul.ulSubMenu > li > a {
    text-decoration: none;
    background-color: #C5F3FF;
    border: 1px solid #53E1FF;
    border-top: none;
    color: #008AAC;
    display: block;
    font-size: 12px;
    line-height: 15px;
    padding: 10px 12px;
    cursor: pointer;
}

ul.ulSubMenu > li:hover
{
    background-color: #008AAC;
    color: #C5F3FF;
}
ul.ulSubMenu > li:hover > a
{
    color: #C5F3FF;
    background-color: #008AAC;
}