HTMLドロップダウンメニューの作り方

HTML を学習した後、多くの人が特殊効果を練習したいと考えています。では、HTML ドロップダウン メニューを作成するにはどうすればよいでしょうか。今日は、ドロップダウン メニューの作成方法を共有しましょう。

2 番目のメニューは実際には難しくありません。通常、li タグと ul タグは一緒に使用されます。最初のステップは We です。まず、ヘッダーと本文を含む HTML の構造を書き出す必要があります。次に、以下に示すように、li タグ内に ul タグを配置し、ジャンプ先のリンクと表示するフォントを li タグ内に配置します。 :

上記の効果は単純なレンダリングですが、必要な 2 番目のメニューは依然として大きく異なります。

次に、セカンダリ メニューにスタイルを与え、セカンダリ メニューの前のメニュー間のマージンとパディングを 0 に設定します。コードは次のとおりです。

<style>
*{
magin:0px;
padding:0;
}
</style>

2 番目のステップは、セレクターの順序を設定することです (div>ul>li)。このとき、不要な li はすべて左に移動します。フロートを設定すれば、サブメニューの作成はほぼ完了します。

div>ul>li{float:left;}

次に、li の小ドットと中ドットを削除する必要があります。小さなドットを削除するには、list-style-type: none を使用して設定し、高さと背景色を設定します。

最後のステップは、以下のメニューを非表示に設定することです。none を表示します。コードは次のとおりです。

  li{    
      list-style-type:none;    
      width: 208px;    
      height: 5epx;    
      text-align: center    
      Line-height:50px;    
      background:lightblue;}

上記は、 HTML ドロップダウン メニューの作成方法の完全な紹介です。Html5 チュートリアル について詳しく知りたい場合は、php 中国語 Web サイトに注目してください。

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