プライマリ メニューとセカンダリ メニューを実装するための純粋な CSS_html/css_WEB-ITnose

長い間、Web サイトの 1 層目と 2 層目のメニューの表示と非表示は JS によって行われてきました。実装するコードはそれほど難しくありませんが、やはり書くのに時間がかかります。 . . 実際には、CSS でこの効果を実現できます。

今日は、HTML 構造のコードをどのように表示するかを見てみましょう。 🎜>

それでは、構造が明らかになったので、ここで重要な点になります。実際には、要素の疑似クラスをまだ使用しています: hover。 UL a: hover の -level サブ要素 LI の下にあるサブノードの display:block を疑似クラスを通じて制御するには、サブメニューの位置を設定する必要があります。 CSS コード

<ul>        <li> <a href="#">首页</a></li>        <li>            <a href="#">                 编程            </a>            <ol>                <li> <a href="#">Java</a> </li>                <li> <a href="#">C/C++</a> </li>                <li> <a href="#">Golang</a> </li>            </ol>        </li>        <li>            <a href="#">                前端            </a>            <ol>                <li> <a href="#">HTML</a> </li>                <li> <a href="#">CSS</a> </li>                <li> <a href="#">Javascript</a> </li>            </ol>        </li></ul>

最終的な効果:

     a {            color: black;            text-decoration: none;        }        a:hover{            color: #fff;        }        ul,li,ol{            list-style: none;            padding: 0;            margin: 0;        }        ol, li{            display: inline-block;        }        ul{            background-color: #44b549;            padding: 5px 10px;            border-radius: 5px;        }        ul > li {            position: relative;            margin-left: 15px;        }        ul > a{            display: block;        }        ul > li > a:hover,ul > li:hover > a{            background-color: #eee;            color: #44b549;        }        ul > li > ol {            display: none;            position: absolute;            width: 300px;            background-color: #44b549;            font-size: 12px;            line-height: 22px;            padding: 5px;            border-radius: 5px;        }        ul > li:hover ol{            display: block;        }

この記事は Wu に属します。 Tongwei のブログ、

WeChat 公開アカウント: bianchengderen、QQ グループ: 186659233

の元の記事、転載する場合は出典と対応するリンクを明記してください: http://www.wutongwei.com/front/infor_showone.tweb? id=197 さん、皆さん拡散・シェア大歓迎です