相关疑难解决方法(0)

我有一个简单的html无序列表.

<ul>
    <li>Item 1</li>
    <li>
        Group 1
        <ul>
            <li>Item 2</li>
            <li>Item 3</li>
        </ul>
    </li>
</ul>

当鼠标在Item或Group上时,我想使用CSS来产​​生一个简单的效果.

li:hover
{
    background-color:#ff0000;
}

它适用于"组1"或"项目1"(不包含在组中) - 当我将鼠标移动到颜色变化上时.但是,如果我移动"第2项"或"第3项","第1组"也会保持高亮显示(红色背景).在这种情况下,我只想强调"第2项"或"第3项".

有谁知道如何做到这一点？

谢谢你的帮助!

===============================编辑

<ul>
    <li>Item 1</li>
    <li>
        Group 1
        <ul>
            <li>Item 2</li>
            <li>Group 2
                <ul>
                    <li>Item 3</li>
                    <li>Item 4</li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

鼠标悬停xxx应突出显示yyy
xxx - > yyy
Item1 - > Item1
Group1 - > Group1,Item2,Group2,Item3,Item4
Item2 - > Item2
Group2 - > Group2,Item3,Item4
Item3 - > Item3
Item4 - > Item4

请参阅http://image-upload.de/image/r76d79/1c7af56a19.png,这是一张快速图纸.

假设一个ul拥有li项目，其中一些再次有ul与内li物品：

    <div class="nav-main">
        <ul>
            <li>First Level First Item</li>
            <li>First Level Second item
                <ul><li>Level 2 First item</li></ul>
            </li>    
            <li>Level 1 Second item</li>
        </ul>
    </div>
</body>

将鼠标悬停在li外部列表的一项上会突出显示此项，但将鼠标悬停在嵌套列表项上会悬停此一项和封闭的列表项。

li:hover { border: 1px solid black; }

怎么总是只有一个项目被突出显示？最好没有任何 JavaScript。

    <div class="nav-main">
        <ul>
            <li>First Level First Item</li>
            <li>First Level Second item
                <ul><li>Level 2 First item</li></ul>
            </li>    
            <li>Level 1 Second item</li>
        </ul>
    </div>
</body>

li:hover { border: 1px solid black; }