0

コードは次のようになります。

<style type="text/css">
#nav, .nav, #nav .nav li { margin:0px; padding:0px; }
#nav li {float:left; display:inline; cursor:pointer; list-style:none; padding:0px 10px 0px 10px; border:1px #000 solid; 
position:relative;}


li, li a {color:#000; text-decoration:none;}
#nav .nav li { width:100%; text-indent:10px; line-height:30px; margin-right:10px; border-top:1px #000 solid; 
border-bottom:1px #000 solid; border-left:none; border-right:none; background:#fff;}
#nav li a {display:block; width:inherit; height:inherit;}

ul.nav { display:none; }
#nav li:hover > a, #nav li:hover { color:#fff; background:#000; }
#nav li ul.first {left:-1px; top:100%;}
li:hover > .nav { display:block; position:absolute; width:200px; top:-2px; left:50%; z-index:1000; border:1px #000 solid; }
li:hover { position:relative; z-index:2000; }
</style>
</head>

<body>
<ul id="nav">
    <li>Menu 1
        <ul class="nav first">
            <li><a href="#">Menu 1</a></li>
            <li>Menu 2</li>
            <li>Menu 3</li>
            <li>Menu 4</li>
        </ul>
    </li>
    <li>Menu 2</li>
    <li>Menu 3</li>
    <li>Menu 4</li>
</ul>


</body>

部分の 3 番目の要素で、セレクター"li, li a"を削除して だけを残すと、最初のレベルのリスト項目にカーソルを合わせると、2 番目のリスト項目が表示されますが、テキストは表示されません。背景の影響、またはテキストの影響です。なぜなら、第 2 レベルのリストに影響を与えているものが見つからないからです!"li""li a"

あ、ちなみに第一階層のリスト項目の下にある「Menu 1」という最初のメニューが表示されているのは、「li a」セレクターのせいだと思いますが、それを削除した部分は削除していません。それがどのように機能するか知っていますが、削除すると何がこの問題を引き起こしているのか誰か教えてもらえますか?

4

2 に答える 2

1

a「Menu 1」の最初のサブアイテムにのみタグを適用しています。そして、次のコードでテキストの色を白（#FFF）にしています：

#nav li:hover > a, #nav li:hover { color:#fff; background:#000; }

背景も白いため、テキストが表示されないのはそのためです。ただしli、次のようにして背景色を黒に変更しているため、にカーソルを合わせるとテキストが表示されます。

li,li a {color:#000; text-decoration:none;} //assigning text color of li as black

上記のコードから削除するliと、上記のコードで述べたように、li 要素内のテキストの色は白色のままになります。

于 2013-03-07T17:29:09.107 に答える
0

この行li, li aは、スタイルがすべての LI および LI 内に含まれるすべての A に適用されていることを意味します。

すべてのスタイリングが相対的に適用されています。つまり、適用されるli, li aすべての LI と、存在する LI 内にネストされた A に影響します。親メニューか子メニューかは問いません。

.navはサブメニューに適用されるクラスであるため、セレクターに含めることでそこにある li をターゲットにすることができます.nav。例えば：#nav .nav li a

サブメニューを非表示にするには、次のことが必要です。

#nav li ul.nav { display: none; }

次に、ホバー時に表示するようにします（これがあなたが望むものであると仮定します）

#nav li:hover ul.nav { display: block; }

すべての質問に答えましたか?

于 2013-03-07T17:27:36.523 に答える