ドロップダウンメニュー（プルダウンメニュー）の作り方です。
ドロップダウンメニューも、リスト（箇条書き）を基本とします。
<ul>〜</ul>タグと<li>〜</li>タグを使います。
★リストの基本を参照してください。
<ul>
<li><a href=
"stepuphtml1.html">
STEP 1</a>
<ul>
<li><a href=
"stepuphtml1.html">
STEP 1-1</a></li>
<li><a href=
"stepuphtml1.html">
STEP 1-2</a></li>
<li><a href=
"stepuphtml1.html">
STEP 1-3</a></li>
</ul>
</li>
<li><a href=
"stepuphtml2.html">
STEP 2</a>
<ul>
<li><a href=
"stepuphtml2.html">
STEP 2-1</a></li>
<li><a href=
"stepuphtml2.html">
STEP 2-2</a></li>
</ul>
</li>
<li><a href=
"stepuphtml3.html">
STEP 3</a>
<ul>
<li><a href=
"stepuphtml3.html">
STEP 3-1</a></li>
<li><a href=
"stepuphtml3.html">
STEP 3-2</a></li>
<li><a href=
"stepuphtml3.html">
STEP 3-3</a></li>
<li><a href=
"stepuphtml3.html">
STEP 3-4</a></li>
</ul>
</li>
<li><a href=
"stepuphtml4.html">
STEP 4</a>
<ul>
<li><a href=
"stepuphtml4.html">
STEP 4-1</a></li>
<li><a href=
"stepuphtml4.html">
STEP 4-2</a></li>
<li><a href=
"stepuphtml4.html">
STEP 4-3</a></li>
</ul>
</li>
</ul>
「STEP10 メニュー」で説明した、
これらの修正を含め、２階層メニューにとりあえず全く同じCSSコードを使うと、
表示
ul.pulldown_menu_1 {
list-style: none; /* 先頭記号を消す */
}
ul.pulldown_menu_1 li {
float: left; /* リスト項目を横方向に並べる */
width: 100px; /* リスト項目の幅 */
}
ul.pulldown_menu_1 ul {
list-style: none; /* 2段目の先頭記号を消す */
padding-left: 0px; /* 2段目の左位置を1段目に揃える */
}
ul.pulldown_menu_1 a {
color: white; /* 文字色 */
display: block; /* ブロックレベルに */
text-align: center; /* 文字を中央合わせに */
padding: 5px; /* 内部の余白 */
border: 1px #9999FF solid; /* 枠線 */
text-decoration: none; /* 下線を消す */
outline: none; /* 選択時の点線枠線を消す */
border-radius: 8px 8px 0px 0px; /* タブに丸みをつける */
background: url(image/gradation_green.bmp); /* 通常の背景画像 */
height: 16px; /* 高さの調整 */
}
ul.pulldown_menu_1 ul a {
border-radius: 0px; /* 2段目以降はタブに丸みをつけない */
background: url(image/gradation_green2.jpg); /* ２段目以降の背景画像 */
}
ul.pulldown_menu_1 a:hover {/* マウスカーソルが乗っている状態 */
background: url(image/gradation_green_R.bmp); /* 通常とは違う背景画像 */
color: blue; /* 文字色 */
}
ul.pulldown_menu_1 a:active {/* マウスがクリックされている状態 */
background: url(image/gradation_green_R.bmp); /* 通常とは違う背景画像 */
color: red; /* 文字色 */
}
★上下方向の文字の位置について（2018年05月14日追記）
文字の上下位置について「vertical-align: middle」が反映しないとのお問い合わせをいただきました。
ul.pulldown_menu_2 ul {
display: none; /* 通常は表示しない */
}
ul.pulldown_menu_2 li:hover > ul {
display: block; /* マウスが乗ったら表示する */
}
ここで、li:hover > ul の”>”は、子を指します。子孫ではなく直下の子だけということです。
リストが２段までならなくても同じです。
細かな調整とかは必要になりますが、ドロップダウンメニュー（プルダウンメニュー）の基本はこんなところです。
ul.pulldown_menu_3 {
list-style: none; /* 先頭記号を消す */
}
ul.pulldown_menu_3 li {
position: relative; /* 2段目の位置を指定するため */
width: 100px; /* リスト項目の幅 */
}
ul.pulldown_menu_3 ul {
position: absolute; /* 2段目の位置を絶対位置で指定 */
left: 100px; /* 1段目の幅の分を右へ */
top: 0px; /* 1段目の上下方向は同じ位置 */
list-style: none; /* 2段目の先頭記号を消す */
padding-left: 0px; /* 2段目の左位置を1段目に揃える */
}
ul.pulldown_menu_3 a {
color: white; /* 文字色 */
display: block; /* ブロックレベルに */
text-align: center; /* 文字を中央合わせに */
padding: 5px; /* 内部の余白 */
border: 1px #9999FF solid; /* 枠線 */
text-decoration: none; /* 下線を消す */
outline: none; /* 選択時の点線枠線を消す */
background: url(image/gradation_green.bmp); /* 通常の背景画像 */
height: 16px; /* 高さの調整 */
}
ul.pulldown_menu_3 ul a {
background: url(image/gradation_green2.jpg); /* ２段目以降の背景画像 */
}
ul.pulldown_menu_3 a:hover {/* マウスカーソルが乗っている状態 */
background: url(image/gradation_green_R.bmp); /* 通常とは違う背景画像 */
color: blue; /* 文字色 */
}
ul.pulldown_menu_3 a:active {/* マウスがクリックされている状態 */
background: url(image/gradation_green_R.bmp); /* 通常とは違う背景画像 */
color: red; /* 文字色 */
}
ul.pulldown_menu_4 {
list-style: none; /* 先頭記号を消す */
}
ul.pulldown_menu_4 li {
width: 100px; /* リスト項目の幅 */
}
ul.pulldown_menu_4 ul {
list-style: none; /* 2段目の先頭記号を消す */
padding-left: 0px; /* 2段目の左位置を1段目に揃える */
}
ul.pulldown_menu_4 a {
color: white; /* 文字色 */
display: block; /* ブロックレベルに */
text-align: center; /* 文字を中央合わせに */
padding: 5px; /* 内部の余白 */
border: 1px #9999FF solid; /* 枠線 */
text-decoration: none; /* 下線を消す */
outline: none; /* 選択時の点線枠線を消す */
background: url(image/gradation_green.bmp); /* 通常の背景画像 */
height: 16px; /* 高さの調整 */
}
ul.pulldown_menu_4 ul a {
background: url(image/gradation_green2.jpg); /* ２段目以降の背景画像 */
}
ul.pulldown_menu_4 a:hover {/* マウスカーソルが乗っている状態 */
background: url(image/gradation_green_R.bmp); /* 通常とは違う背景画像 */
color: blue; /* 文字色 */
}
ul.pulldown_menu_4 a:active {/* マウスがクリックされている状態 */
background: url(image/gradation_green_R.bmp); /* 通常とは違う背景画像 */
color: red; /* 文字色 */
}