0

純粋な CSS 水平メニューを作成する方法を説明するチュートリアル Web サイトからコピーしたこの小さなコードは、それがどのように機能するかをようやく理解したと思ったときに、このことを発見し、基本的にすべてを反映しようとしています私がCSSで学んだこと、私は立ち往生しています。

つまり、基本的にコードは次のような 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;}
#nav li ul.first {left:-1px; top:100%;}

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; }
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; }

そしてhtml、

<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>

これが問題の始まりです。CSS の 9 行目、はい、その li:hover > .nav部分で、それを に変更すると#nav li:hover > .nav、ドロップダウン メニューがめちゃくちゃになり、本来あるべき動作をしなくなります。単純な#navものがレイアウトを台無しにする方法を明らかにしようとしています。いくつかの理論を思いつきましたが、それらは私が学んだことのいくつかと矛盾するため、証明できないようです私にこれを説明してください、私は気が狂います！

どなたか、よろしければよろしくお願いします。

4

1 に答える 1

0

あなたが持っている：

#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 #f00 solid; }

最初の行はより具体的であるため、その行leftとtop値は後の行よりも優先されます。後者の行を次のように変更すると:

#nav li:hover > .nav { display:block; position:absolute; width:200px; top:-2px; left:50%; z-index:1000; border:1px #f00 solid; }

最初のものより具体的になり、代わりに最初のものよりも優先されます。そのため、位置が変わります。

たとえば、「css precedence」をグーグルで検索すると、この内容を読むことができます。

于 2013-03-02T13:47:12.373 に答える