メニューサンプル

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=shift_jis” />
<title>無題ドキュメント</title>

<style type=”text/css”>
<!–
#dropmenu {
margin: 0px 0px 15px 0px;
padding: 0px;
list-style-type: none;
width: 720px; /* 十分な横幅があればこれはいらない */
float: left; /* floatで高さが無くなる対策 */
}
#dropmenu > li {
float: left;
position: relative; /* 子メニューにabsoluteを設定するため */
}
#dropmenu li a {
display: block; /* aタグはインライン要素なのでブロックレベル要素にする */
text-align: center;
height: 30px;
width: 140px;
padding-top: 10px;
background-color: #3D963B;
font-size: 12px;
color: #EEF;
text-decoration: none;
border: 1px solid #93D6A4;
}
#dropmenu li ul {
z-index: 2;
margin: 0px;
padding: 0px;
list-style-type: none;
position: absolute;
top:32px;
left:0px;
overflow: hidden;
height: 0px;
transition: all 0.5s;
}
#dropmenu li:hover ul {
color:#F00;
height: 240px;
}

–>
</style>

</head>

<body>

<div id=”dropmenu”>
<li><a href=”http://tsurukawa.net/” target=”_new”>TSURUKAWA.NET</a>
<ul>
<li><a href=”http://ozpa-h4.com/2012/11/27/color-chart-tool/” target=”_new”>色選択ツール</a></li>
<li><a href=”https://kuler.adobe.com/ja/create/color-wheel/” target=”_new”>adobe create</a></li>
<li><a href=”http://paletton.com/#uid=1000u0kllllaFw0g0qFqFg0w0aF” target=”_new”>paletton</a></li>
<li><a href=”http://www.color-fortuna.com/color_scheme_genelator2/” target=”_new”>配色ツール</a></li>
<li><a href=”http://www.colordic.org/”>原色大辞典</a></li>
<li><a href=”http://www.colorzilla.com/gradient-editor/”>CSSグラデーション</a></li>
</ul>
</li>
<li><a href=”http://www.sinken-reform.com/” target=”_new”>新建reform</a>
<ul>
<li><a href=”http://sinken-particul.com/” target=”_new”>新建perticul</a></li>
<li><a href=”http://shop.jyu-setsu.com/” target=”_new”>住宅設備.com</a></li>
<li><a href=”http://www.rakuten.co.jp/sinken/” target=”_new”>楽天sinken</a></li>
<li><a href=”http://store.shopping.yahoo.co.jp/sinkenr-reform/” target=”_new”>YAHOOsinken</a></li>
</ul>
</li>
<li><a href=”#”>セブンエイト</a>
<ul>
<li><a href=”http://www.seven-8.net/” target=”_new”>セブンエイト</a></li>
<li><a href=”http://seven-8.sub.jp/” target=”_new”>サ高住</a></li>
<li><a href=”http://www.hpc-togo.jp/” target=”_new”>HPC統合医療</a></li>
<li><a href=”http://www.hpc-togo.net” target=”_new”>旧HPC統合医療</a></li>
</ul>
</li>
<li><a href=”http://www.n-stage.co.jp”>NEXT STAGE</a>
<ul>
<li><a href=”http://japonyol.net/editor/distancia.html” target=”_new”>GooleMap距離測定</a></li>
<li><a href=”http://wisteriahill.sakura.ne.jp/GMAP/GMAP_CALCAREA_V3/” target=”_new”>GooleMap面積計算</a></li>
<li><a href=”#” target=”_new”>子メニュー</a></li>
</ul>
<li><a href=”#”>楽天CSV</a>
<ul>
<li><a href=”https://mainmenu.rms.rakuten.co.jp/auth/index.phtml?params=rms/csv/rs/07.html&s=&param2=0″ target=”_new”>CSV保存する際の注意点</a></li>
<li><a href=”https://mainmenu.rms.rakuten.co.jp/auth/index.phtml?params=rms/csv/rs/13.html&s=&param2=0″ target=”_new”>通常商品登録用CSV</a></li>
<li><a href=”https://mainmenu.rms.rakuten.co.jp/auth/index.phtml?params=rms/csv/rs/15.html&s=&param2=0″ target=”_new”>カテゴリ登録用CSV</a></li>
</ul>
</li>
</div>
<body>
<div id=”dropmenu”>
<li><a href=”https://www.google.com/webhp?hl=ja”>Google</a>
<ul>
<li><a href=”https://mail.google.com/mail/u/0/#inbox” target=”_new”>gmail</a></li>
<li><a href=”https://www.google.com/calendar/render?tab=wc” target=”_new”>カレンダー</a></li>
<li><a href=”https://www.google.com/calendar/syncselect” target=”_new”>カレンダーシンクロ設定</a></li>
</ul>
</li>
<li><a href=”http://www.xserver.ne.jp/” target=”_new”>Xserver</a>
<ul>
<li><a href=”http://www.sakura.ne.jp/” target=”_new”>さくらインターネット</a></li>
<li><a href=”http://lolipop.jp/” target=”_new”>ロリポップ</a></li>
<li><a href=”http://www.onamae.com/” target=”_new”>お名前.com</a></li>
</ul>
</li>
<li><a href=”http://habitat-co.jp/”>ハビタット</a>
<ul>
<li><a href=”http://habitat-co.jp/” target=”_new”>ハビタット</a></li>
<li><a href=”#” target=”_new”>子メニュー</a></li>
<li><a href=”#” target=”_new”>子メニュー</a></li>
</ul>
<li><a href=”#”>発注</a>
<ul>
<li><a href=”http://rease-print.com/” target=”_new”>プリントシール</a></li>
<li><a href=”http://www.trade-sign.com/” target=”_new”>マグネットシートなど</a></li>
<li><a href=”#” target=”_new”>子メニュー</a></li>
</ul>
</li>
<li><a href=”#”>親メニュー</a>
<ul>
<li><a href=”#” target=”_new”>子メニュー</a></li>
<li><a href=”#” target=”_new”>子メニュー</a></li>
<li><a href=”#” target=”_new”>子メニュー</a></li>
</ul>
</li>
</div>
</body>
</html>