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 に答える