1 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type='text/css'  media='all'>
        #menu {width: 50%;}
        .high {background: #0F0;}
        .list-item :hover {background: #000;}

        /* non essential styles */
        .list-item a{text-decoration: none;}
        .list-item :hover a{color: #FFF;}
    </style>
</head>
<body>
    <div id="menu" >
        <ul>
            <li class="list-item">
                <div class="level-0 high" id="P0">
                    <a href="#">P0</a>
                </div>
                <ul>
                    <li class="list-item">
                        <div class="level-1" id="C0-P0">
                            <a href="#">C0-P0</a>
                        </div>
                    </li>
                    <li class="list-item">
                        <div class="level-1" id="C1-P0">
                            <a href="#">C1-P0</a>
                        </div>
                    </li>
                </ul>
            </li>
            <li class="list-item">
                <div class="level-0" id="P1">
                    <a href="#">P1</a>
                </div>
                <ul>
                    <li class="list-item">
                        <div class="level-1" id="C0-P1">
                            <a href="#">C0-P1</a>
                        </div>
                    </li>
                    <li class="list-item">
                        <div class="level-1" id="C1-P1">
                            <a href="#">C1-P1</a>
                        </div>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
</body>

结构：
P0
__ C0-P0
__ C1-P0
P1
__ C0-P1
__ C1-P1

目前我无法单独选择和更改子项的背景（悬停时）。
但是，如果我尝试使用first-child选择器 - 我可以单独选择每个列表项。但是 -
那么父母的选择仅限于锚点宽度而不是完整的菜单宽度。

这是JSFilldle

4

2 回答 2

1

目前还不清楚你在问什么，但:hover元素之间不应该有空格。

应该.list-item:hover {...}不是.list-item :hover {...}

于 2012-12-22T23:32:33.053 回答
0

更改此行：

.list-item :hover {background: #000;}

对此：

li .list-item :hover {background: #000;}

这是jsFiddle ...

于 2012-12-22T23:33:43.477 回答