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

現在の Web ページ構造では、ナビゲーション メニュー バーは非常に重要な位置を占めています。これは、周知のとおり、HTML

メニューはグレード付けできるため、css3 と連携してナビゲーション ドロップダウン メニューを実装できます。この記事の内容は、CSS3 を使用してナビゲーション ドロップダウン メニューを実装する方法についてです。必要な方は参考にしていただければ幸いです。

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

まず、

• メニューを作成するには、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 サイトの他の関連記事を参照してください。