ホームページ > 記事 > ウェブフロントエンド > CSS で 2 番目のドロップダウンメニューを記述する方法

CSS で 2 番目のドロップダウンメニューを記述する方法

藏色散人オリジナル: 2021-01-04 09:27:203982ブラウズ

CSS で 2 番目のドロップダウンメニューを記述する方法: 最初に HTML サンプルファイルを作成し、次に CSS の表示属性を使用して 2 番目のドロップダウンメニューを表示するかどうかを制御し、最後にブラウザ経由で効果を実行します。

#このチュートリアルの動作環境: Dell G3 コンピューター、Windows7 システム、Chrome76.0&&CSS3 バージョン。

推奨事項: "

css ビデオチュートリアル "

セカンダリナビゲーションドロップダウンメニューを実装するための純粋な CSS

考え:

CSS の表示属性を使用して、2 番目のドロップダウンメニューを表示するかどうかを制御します。マウスを第 1 レベルのナビゲーションメニューの li タグに移動すると、第 2 レベルのナビゲーションメニューの ul タグが表示されます。実装は比較的単純なので、リファレンスコードをここに直接示します。

純粋な CSS セカンダリナビゲーションドロップダウンメニューコード

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" content="text/html" http-equiv="content-type">
    <title>纯css二级导航下拉菜单</title>
    <meta name="keyword" content="关键字">
    <meta name="description" content="描述">
    <style type="text/css">
        *{margin: 0;padding: 0;}
        #bg{background: red;width: 100%;height: 35px;}
        nav{height: 35px;width: 1000px;margin: 0 auto;}
        nav ul li{list-style-type:none;float: left}
        nav ul li a{ text-decoration: none;display: block;width: 130px;line-height: 35px;
        text-align: center;color:white;font-fimily:微软雅黑;}
        nav ul li ul li{float: none}
        nav ul li ul li a{color:black}
        nav ul li ul{display: none;}
        nav ul li:hover ul{display: block;}
    </style>
</head>
<body>
<div id="bg">
<nav>
    <ul>
        <li><a href="#">一级导航</a>
        <ul>
            <li><a href="#">二级导航</a></li>
            <li><a href="#">二级导航</a></li>
            <li><a href="#">二级导航</a></li>
            <li><a href="#">二级导航</a></li>
        </ul>
        </li>
        <li><a href="#">一级导航</a>
            <ul>
                <li><a href="#">二级导航</a></li>
                <li><a href="#">二级导航</a></li>
                <li><a href="#">二级导航</a></li>
            </ul>
        </li>
        <li><a href="#">一级导航</a>
            <ul>
                <li><a href="#">二级导航</a></li>
                <li><a href="#">二级导航</a></li>
                <li><a href="#">二级导航</a></li>
                <li><a href="#">二级导航</a></li>
            </ul>
        </li>
        <li><a href="#">一级导航</a>
            <ul>
                <li><a href="#">二级导航</a></li>
                <li><a href="#">二级导航</a></li>
                <li><a href="#">二级导航</a></li>
            </ul>
        </li>
        <li><a href="#">一级导航</a>
            <ul>
                <li><a href="#">二级导航</a></li>
                <li><a href="#">二级导航</a></li>
                <li><a href="#">二级导航</a></li>
                <li><a href="#">二级导航</a></li>
                <li><a href="#">二级导航</a></li>
            </ul>
        </li>
        <li><a href="#">一级导航</a>
            <ul>
                <li><a href="#">二级导航</a></li>
                <li><a href="#">二级导航</a></li>
                <li><a href="#">二级导航</a></li>
                <li><a href="#">二级导航</a></li>
            </ul>
        </li>
        <li><a href="#">一级导航</a>
            <ul>
                <li><a href="#">二级导航</a></li>
                <li><a href="#">二级导航</a></li>
            </ul>
        </li>
    </ul>
</nav>
</div>
</body>
</html>

実行中の効果:

CSS で 2 番目のドロップダウンメニューを記述する方法

以上がCSS で 2 番目のドロップダウンメニューを記述する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：CSSグリッドレイアウト（グリッド）の共通プロパティの紹介次の記事：CSSグリッドレイアウト（グリッド）の共通プロパティの紹介

続きを見る

CSS で 2 番目のドロップダウン メニューを記述する方法

関連記事

CSS で 2 番目のドロップダウンメニューを記述する方法