これはjavascriptを使用せずに、ドロップダウンメニュー純粋なCSS Dropを作成する方法についてのチュートリアルです。 私は、人々が多くの場合、この効果を達成するためにJavaScriptを使用しているしかし、気づいた。 実際には、専用のCSSでそれを行うための簡単​​な方法があります。

ここでは例

最初のステップ：私たちは基本的なHTML構造を作成します。

  > 未満のdivは "IDを ="ヘッダー >を
 の<H1>開発者のパラダイスデモ未満/ H1は>
 > 未満ULの IDを ="メニュー">を
 <LI>と の<span>ホーム未満/スパン>
 <ul>
 > Menu item 1 </a> </li> <LI>と 未満 のHREF ="＃">をメニュー項目<1 / a>を未満/李>
 > Menu item 2 </a> </li> <LI>と 未満 のHREF ="＃">をメニュー項目2 未満/ a>を未満/李>
 > Menu item 3 </a> </li> <LI>と 未満 のHREF ="＃">をメニュー項目<3 / a>を未満/李>
 未満/ UL規格>
 未満/李>
 <LI>と の<span>は >を会社概要は、 未満/スパン
 <ul>
 > Menu item 1 </a> </li> <LI>と 未満 のHREF ="＃">をメニュー項目<1 / a>を未満/李>
 > Menu item 2 </a> </li> <LI>と 未満 のHREF ="＃">をメニュー項目2 未満/ a>を未満/李>
 > Menu item 3 </a> </li> <LI>と 未満 のHREF ="＃">をメニュー項目<3 / a>を未満/李>
 未満/ UL規格>
 未満/李>
 <LI>と の<span>製品未満/スパン>
 <ul>
 > Menu item 1 </a> </li> <LI>と 未満 のHREF ="＃">をメニュー項目<1 / a>を未満/李>
 > Menu item 2 </a> </li> <LI>と 未満 のHREF ="＃">をメニュー項目2 未満/ a>を未満/李>
 > Menu item 3 </a> </li> <LI>と 未満 のHREF ="＃">をメニュー項目<3 / a>を未満/李>
 未満/ UL規格>
 未満/李>
 未満/ UL規格>
 未満/ divの> 

2番目のステップ：今、私たちは魔法のCSSコードを作成する

  ; padding : 0 ; } * {マージン：0;パディング：0;}

体{
 ; 背景 ：＃222;
 Arial, Helvetica, sans-serif ;フォント：100％、通常の MS Pゴシックは、Helvetica、sans - serifに 。
 }

 : #fff ; } H1は{ 色 ：＃FFFを ;}

 ＃ヘッダ {
 ;高さ：120px;位置：相対的な ;
 ; 背景 ：＃333;
 }

 ＃メニュー {
マージン：0px;
パディング：0px;
位置：絶対 ;
 ; トップ ：70px;
表示：ブロック ;
 }

 ＃メニュー >李{
リストスタイルのタイプ：なし ;
フロート：左 ;
表示：ブロック ;
 ;マージン：0px 10pxの ;
位置：相対的な ;
パディング：10pxの ;
幅：100pxに 。
 }

 ul { ＃メニュー >李：ホバーのUL {
表示：ブロック ;
 }

 { ＃メニュー >李：ホバー {
 ; 背景色 ：＃808080;
は- moz -国境半径：10pxの ;
 - webkitの国境を越えた半径：10pxの ;
 }

 ＃メニューが李UL規格{
マージン：0px;
パディング：0px;
ディスプレイ：なし ;
 }
 ＃メニューが李ULの李{
リストスタイルのタイプ：なし ;
 ;マージン：10pxの 0 0 0;
フォントサイズ：11px;
 }

 ＃メニューが李ULのリチウム一{
表示：ブロック ;
 ;パディング：5px 10pxの ;
 ; 色 ：＃FFFを 。
テキスト装飾：なし ;
フォント重量：100％;
 }

 a { ＃メニューが李UL規格李：、ホバー一{
 ; 背景色 ：＃606060;
は- moz -国境半径：5px;
 - webkitの国境を越えた半径：5px;
 }

 ＃メニューのliスパン{
カーソル：ポインタを返します 。
 ;マージン：0px 10pxの ;
フォント重量：100％;
 ; font-size : 11px ; 色 ：＃FFFを 、フォントサイズ：11px;
 } 

（この貧しいブラウザは分かっていないかUL規格>李手段）このコードは、IE6で動作しないことに注意してください。

あなたは私のブログや共有以下のリンクを使用して支持されたネットワーキングサイトのいずれかでこのリンクを促進するために2番目を取ることができる場合、私は感謝される。 へ必要に応じて我々の優先サイトへのリンクここでは名前を登録するドメイン 。

報告Filed under： CSSの 、 チュートリアルは、管理者によって