CSS3で動的でスタイリッシュなwebページを実現しよう。
Webデザイン・ビギナーでも大丈夫な、20分で作れる簡単ドロップダウン・メニューのチュートリアルを紹介するよ。

Step1. HTMLファイルにタグを記述するよ
下図のようにHTMLファイル(のbody内)に記述しよう。

<ul>      <li><a href="#">My Dashbord</a></li>      <li><a href="#">Likes</a></li>      <li><a href="#">Views</a>             <ul>                     <li><a href="#" class="documents">Documents</a></li>                     <li><a href="#" class="messages">Messages</a></li>                     <li><a href="#" class="signout">Sign Out</a></li>             </ul>      </li>      <li><a href="#">Uploads</a></li>      <li><a href="#">Videos</a></li>      <li><a href="#">Documents</a> </ul>

これはブラウザではこのように表示されるよ。

黒点がメニューの大まかなカテゴリ（メインメニュー）で、白点がさらに大カテゴリの中の細かいカテゴリ（サブメニュー）になっているね。ここからメインメニューを横に並べ、はじめ見えているのはメインのみで、マウスが重なるとサブメニューが開くようにしていくのだ。


Step2. メインメニューのレイアウトとデザインをするよ
HTMLファイルから呼び出すCSSファイルに、下図のように記述しよう。

.menu, .menu ul, .menu li, .menu a {     margin: 0;     padding: 0;     border: none;     outline: none; }   .menu {     height: 40px;     width: 505px;     background: #4c4e5a;     background: -webkit-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);     background: -moz-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);     background: -o-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);     background: -ms-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);     background: linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);       -webkit-border-radius: 5px;     -moz-border-radius: 5px;     border-radius: 5px; }   .menu ul{    display: none; }   .menu li {     position: relative;     list-style: none;     float: left;     display: block;     height: 40px; }

色や大きさ、余白取りなどの設定をしてあるね。さらにリストスタイル（黒点）を無くし、block要素としてfloat: left;で横に並ぶようにすることで、メニューらしい外観に近づけているよ。
あと、とりあえず、作業しやすいようにサブメニューは今は見えない状態にしておきたいので、緑の箇所を一時的に記述してあるよ。

ここまで記述すると、ブラウザの表示は下のようになる。

メニューバーはそれらしいけど、メインメニュー項目がくっついちゃっているね。
表記もまだ、ただの文字リンクっぽい。なので、ここをこれからさらにデザインして行くよ。


Step3. メインメニューのリンクのデザインをするよ

.menu li a {     display: block;     padding: 0 14px;     margin: 6px 0;     line-height: 28px;     text-decoration: none;       border-left: 1px solid #393942;     border-right: 1px solid #4f5058;       font-family: Helvetica, Arial, sans-serif;     font-weight: bold;     font-size: 13px;     color: #f3f3f3;     text-shadow: 1px 1px 1px rgba(0,0,0,.6);       -webkit-transition: color .2s ease-in-out;     -moz-transition: color .2s ease-in-out;     -o-transition: color .2s ease-in-out;     -ms-transition: color .2s ease-in-out;     transition: color .2s ease-in-out; }   .menu li:first-child a { border-left: none; } .menu li:last-child a{ border-right: none; } .menu li:hover > a { color: #8fde62; }

paddingをとって、さらにborder-leftとborder-rightで各メニュー項目の間に仕切りを作っている。文字色も、よりメニューバーに合う白系の色(#f3f3f3)に変更して太字(bold)にし、文字リンクっぽさを解消すべく下線を無くして(text-decoration:none;)いる。そうすることでよりメニューっぽい外観になった。
マウスポインタがメニューリンク項目上に乗る(a:hover)と、文字色が黄緑になる(#8fde62)ように設定。
transition:colorというのは、色が入れ替わるときにパッと変わるのか、じわーっと変わるのかという時間変化の設定だね。

ここまでをブラウザで確認。下のようになっていればOK。




Step4. サブメニューをデザインするよ

まずは、さっき一時的に書いたこの行を削除しよう。

.menu ul{    display: none; }

で、新しく下を書いて行くよ。

.menu ul {      position: absolute;      top: 40px;      left: 0;        opacity: 0;      background: #1f2024;        -webkit-border-radius: 0 0 5px 5px;      -moz-border-radius: 0 0 5px 5px;      border-radius: 0 0 5px 5px;        -webkit-transition: opacity .25s ease .1s;      -moz-transition: opacity .25s ease .1s;      -o-transition: opacity .25s ease .1s;      -ms-transition: opacity .25s ease .1s;      transition: opacity .25s ease .1s; }   .menu li:hover > ul {      opacity: 1; }   .menu ul li {      height: 0;      overflow: hidden;      padding: 0;        -webkit-transition: height .25s ease .1s;      -moz-transition: height .25s ease .1s;      -o-transition: height .25s ease .1s;      -ms-transition: height .25s ease .1s;      transition: height .25s ease .1s; }   .menu li:hover > ul li {      height: 36px;      overflow: visible;      padding: 0; }

緑の部分に注目しよう。通常ではサブメニューは不透明度(opacity)が0、つまり透明で見えないようになっているね。でもその後、メインメニューにマウスポインタが上に乗ったとき(:hover)の記述のところでは、不透明度(opacity)は1に設定されているので、メインにマウスが乗っかったときサブメニューが見えるようになる。
ここではサブメニューがパッと出るんじゃなく、にょろっと出るように、transition:opacityとtransition:heightで調節してあるよ。


Step5. サブメニューのリンクのデザインをするよ

.menu ul li a {       width: 100px;     padding: 4px 0 4px 40px;     margin: 0;     border: none;     border-bottom: 1px solid #353539; }   .menu ul li:last-child a { border: none; }

サブメニューの各項目の幅は100pxに統一。



Additional Code
次のように記述すると、サブメニュー内に背景を表示させることもできるよ。
urlには背景に使う画像の居場所をちゃんと指定しよう。

.menu a.documents {       background: url(../img/docs.png) no-repeat 6px center;  } .menu a.messages {       background: url(../img/bubble.png) no-repeat 6px center;  } .menu a.signout {       background: url(../img/arrow.png) no-repeat 6px center;  }

Step6. 完成！
こういう感じになるよ。




◆プレビュー・ファイルダウンロード
記事掲載元サイト（英語）でプレビュー、ファイルダウンロードができるよ。

プレビューを見る
ファイルをダウンロード
※Twitterでツイートするのがアンロックの条件。

（オリジナル記事：「How to Create a CSS3 Dropdown Menu [Tutorial]」）