純粋な CSS を使用して、マウスがその上を通過した後に表示されるドロップダウン メニューを実装します (コードは添付されています)。

インターネット上の任意の Web サイトを開くと、これらの Web サイトにはナビゲーション部分があり、一部のナビゲーションにはマウスがその上を通過した後にドロップダウン メニューがあることがわかります。では、この種のドロップダウン メニューを作成するにはどうすればよいでしょうか。実際、純粋な CSS を使用してナビゲーション ドロップダウン メニューを作成できます。次に、CSS を使用してドロップダウン メニューを作成する方法について説明します。それでは本題に入ります。

HTML 部分:
1. または などの任意の HTML 要素を使用できます。
2. コンテナ要素 (

など) を使用します。ドロップダウン メニューのコンテンツを作成し、任意の場所に配置します。
3.

要素を使用してこれらの要素をラップし、CSS を使用してドロップダウン コンテンツのスタイルを設定します。
CSS 部分:
1. .dropdown は、position:relative を使用し、ドロップダウン メニューのコンテンツをドロップダウン ボタンの右下隅に設定します (position:absolute を使用)。
2. .dropdown-content は実際のドロップダウン メニューです。デフォルトでは非表示になっており、マウスが指定された要素に移動すると表示されます。 注: ドロップダウン コンテンツをドロップダウン ボタンと同じ幅に設定する場合は、幅を 100% に設定します。
3. :hover セレクターは、マウスをドロップダウン ボタンの上に移動したときにドロップダウン メニューを表示するために使用されます。

例: 純粋な CSS を使用してナビゲーション ドロップダウン メニューを作成します

HTML コード:

<p>纯CSS实现鼠标移动到按钮上打开下拉菜单。</p>
  <div class="dropdown">
   <button class="dropbtn">下拉菜单</button>
   <div class="dropdown-content">
    <a href="#">菜单1</a>
    <a href="#">菜单2</a>
    <a href="#">菜单3</a>
   </div>
  </div>

CSS 部分:

.dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
   }   
   .dropdown {
    position: relative;
    display: inline-block;
   }
   .dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    width: 100%;;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
   } 
   .dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
   }   
   .dropdown-content a:hover {
    background-color: #f1f1f1
   }  
   .dropdown:hover .dropdown-content {
    display: block;
   }   
   .dropdown:hover .dropbtn {
    background-color: #3e8e41;
   }

効果の画像を見てください。

上記は、純粋な CSS でドロップダウン メニューを作成する方法を例を示して説明しています。実際のプロジェクトでは、必要に応じて必要なスタイルを設定できます。

以上が純粋な CSS を使用して、マウスがその上を通過した後に表示されるドロップダウン メニューを実装します (コードは添付されています)。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。