CSS3 を使用してナビゲーション ドロップダウン メニューを実装する方法 (完全なコードが添付されています)

現在の Web ページ構造では、ナビゲーション メニュー バーは非常に重要な位置を占めています。これは、周知のとおり、HTML b977f8334eab139c2080fc03680b5d4fbed06894275b65c1ab86501b08a632eb929d1f5ca49e04fdcb27f9465b944689メニューはグレード付けできるため、css3 と連携してナビゲーション ドロップダウン メニューを実装できます。この記事の内容は、CSS3 を使用してナビゲーション ドロップダウン メニューを実装する方法についてです。必要な方は参考にしていただければ幸いです。

css3 を使用してナビゲーション ドロップダウン メニューを実装する原則

まず、ff6d136ddc5fdfeffaf53ff6ee95f18525edfb22a4f469ecb59f1190150159c6< を使用します。 HTML の /li> ;929d1f5ca49e04fdcb27f9465b944689 メニューを作成するには、hover ステートメントを使用します。つまり、マウスが特定の領域に移動すると、下位レベルのメニューの表示がトリガーされます。 know は表示属性です。block と none のプロパティは、ドロップダウン メニューの表示と非表示に使用されます。次に、各メニューの位置を定義してメニューの位置を決定し、最後に ::after 疑似要素セレクターを使用してフロートをクリアします。

#CSS3 を使用してナビゲーション ドロップダウン メニューを実装する手順

##ステップ 1: HTML を使用してメニュー スタイルを作成する

<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></li>
            <li><a href="#">导航三</a>
                <ul>
                    <li><a href="#">二级导航</a></li>
                    <li><a href="#">二级导航</a></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></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>
                </ul> 
            </li>
            <li><a href="#">导航六</a></li>
        </ul>
    </nav>

ステップ 2: CSS3 を使用して、マウス ホバーによってトリガーされるドロップダウン メニューを実装します

nav {
    margin:100px auto;
    text-align:center;
}
nav ul {
    border-radius:10px;
    background:linear-gradient(to bottom,#efefef,#bbbbbb);
    padding:0 20px;
    display:inline-table;
    position:relative;  
    box-shadow:1px 1px 3px #666;
}
nav ul ul {
    display:none;
}
nav ul li {
    float:left; 
}
nav ul::after {
    content:"";
    display:block;
    clear:both;
}
nav ul li a {
    display:block;
    padding:25px 40px;
    color:#000;
    text-decoration:none;
    font-family:"微软雅黑";
}
nav ul li:hover > ul {
    display:block;
}
nav ul li:hover {
    background:linear-gradient(to bottom,#4f5964,#5f6975);
}
nav ul li:hover a {
    color:#FFF;
}
nav ul ul {
    background:#5f6975;
    border-radius:0;
    position:absolute;
    top:100%;
    padding:0;
}
nav ul ul li {
    float:none;
    border-top:1px solid #6b727c;
    border-bottom:1px solid #575f6a;
}
nav ul ul li a {
    color:#FFF;
}   
nav ul ul li a:hover {
    background:#4b545f;
}
nav ul ul ul {
    width:100%;
    position:absolute;
    left:100%;
    top:50%;
}

ステップ 3: 要件に応じて美しくするメニュー スタイルの

ドロップダウン メニュー スタイルは図に示すとおりです

以上がCSS3 を使用してナビゲーション ドロップダウン メニューを実装する方法 (完全なコードが添付されています)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。