-3

ドロップダウン メニュー内に別のドロップダウン メニュー効果を作成しようとしています。

観察：

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="javascript/class-lib.js"></script>
<script type="text/javascript" src="javascript/script.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<div id="wrapper">
    <ul id="nav">
        <li><a href="#">Home</a></li>
        <li><a href="#" class="selected">Parent 02</a>
            <ul>
                <li><a href="#">Item 01</a></li>
                <li><a href="#" class="selected">Item 02</a></li>
                <li><a href="#">Item 03</a></li>
            </ul>
            <div class="clear"></div> <!--".clear" div is nested within the .selected class, outside of the <ul>. Does this provide a buffer??? -->
        </li>
        <li><a href="#">Parent 03</a>
        <ul>
            <li><a name="child" href="#">Child 04</a>
                <ul>
                    <li><a href="#">Item 01</a></li>
                    <li><a href="#">Item 02</a></li>
                    <li><a href="#">Item 03</a></li>
                </ul>
            </li>
            <li><a href="#">Item 05</a></li>
            <li><a href="#">Item 06</a></li>
            <li><a href="#">Item 07</a></li>
        </ul>         
            <div class="clear"></div>
        </li>
        <li><a href="#">Parent 04</a></li>
    </ul>
    <div class="clear"></div>
</div>
</body>
</html>>

CSS:

#nav li ul li a:hover{

                #nav li ul li ul li a{
                        visibility:visible;   /*<-- the only reason why I did that was to see if something like this would actually work. It doesn't. I gotta say I'm really not a fan of this language. While I'm sure there were reasons for not implementing this kind of method and design/scripting pattern, it seems like there are just as well plenty reasons TO implement it. */  
                }
        }

        #nav li ul li ul{
        display:block;
        list-style:none;
        }

        #nav li ul li ul li{
        float:right;
        clear:both;
        width:50px;
        height:100px;
        background:#000;
        }

        #nav li ul li ul li a{
        visibility:hidden;
        color:#fff;
        }

私がそれを行った唯一の理由は、このようなものが実際に機能するかどうかを確認することでした. そうではありません。私は本当にこの言語のファンではないと言わざるを得ません。この種の方法と設計/スクリプト パターンを実装しない理由があったことは確かですが、それを実装する理由も十分にあるようです。

CSS でセレクター ブロックをネストできないのはなぜですか?

4

3 に答える 3

2

代わりに：

#nav li ul li a:hover{

                #nav li ul li ul li a{
                        visibility:visible; 
                }
}

そのはず：

#nav li ul li:hover ul li a
{
    visibility:visible; 
}
于 2011-06-01T03:19:59.713 に答える
2

ステートメントをネストすることはできません。CSS の正しい使い方ではありません。

ウィキペディアから：

カスケード スタイル シート (CSS) は 、マークアップ言語で記述されたドキュメントのプレゼンテーション セマンティクス (外観と書式設定) を記述するために使用されるスタイル シート言語です。その最も一般的なアプリケーションは、HTML および XHTML で記述された Web ページのスタイルを設定することですが、この言語は、プレーンな XML、SVG、および XUL を含むあらゆる種類の XML ドキュメントにも適用できます。

CSS は JavaScript のようなスクリプト言語ではないため、JavaScript のようには動作しません。何を表示するか、どのように表示するかをブラウザに指示するだけです。それが主な目的です。

ただし、純粋な CSS で必要なことを行う方法はいくつかあります。ルール宣言を入れ子にすることはできませんが、気の利いた方法で適用できます。

element subelement {
  display: none;
}

element:hover subelement {
  display: block;
}

これが、純粋な CSS のドロップダウン メニューの背後にある基本的なロジックです。:hoverホバリングされている要素にクラスを追加し、そこから作業するものと考えてください。

完全なチュートリアルが必要な場合は、有望なチュートリアルがあります: http://csswizardry.com/2011/02/creating-a-pure-css-dropdown-menu/

于 2011-06-01T03:20:09.273 に答える
0

他の人が問題を解決する方法を教えてくれましたが、実際にはそのようにすべきではありません。これは、メニューを作成するための優れたクリーンな方法ですが、コンテンツ プレゼンテーション動作規則の境界を越えています。大した問題ではないかもしれませんが、メニューをドロップダウンするコードは JavaScript に属します。

于 2011-06-01T03:43:30.813 に答える