« table | トップページ | IE6 png透過 »

2009年5月21日 (木)

さてHOVERの応用

ということは、本日も引き続きECサイト作成なわけです。
画像の加工でほぼ丸一日。HOVERで数時間で終了。

さて、DREAMWEAVERがないかたこれは使えます。

sample_dd.gif

<div id="drop_menu">
<dl>
<dt><a href="#">メニュー001</a></dt>
<dd><a href="#">メニューリンク</a></dd>
<dd><a href="#">メニューリンク</a></dd>
<dd><a href="#">メニューリンク</a></dd>
</dl>
<dl>
<dt><a href="#">メニュー002</a></dt>
<dd><a href="#">メニューリンク</a></dd>
<dd><a href="#">メニューリンク</a></dd>
<dd><a href="#">メニューリンク</a></dd>
</dl>

</div>
#drop_menu dl {
float:left;
width:20%;
}
#drop_menu dl a {
display: block;
text-decoration: none;
padding: .2em 0;
width: 100%;
color: #fff;
}
#drop_menu dl dt a {
background: #666;
border-top: 1px solid #999;
border-bottom: 1px solid #333;
text-align: center;
}
#drop_menu dl:hover dt a {
background: #000;
}
#drop_menu dl dd {
display: none;
}
#drop_menu dl:hover dd {
display: block;
}

#drop_menu dd a {
background: #09c;
border-top: 1px solid #3ECFFF;
border-bottom: 1px solid #00526C;
text-indent: 1em;
}
#drop_menu dd a:hover {
border-top: 1px solid #009BCE;
border-bottom: 1px solid #003040;
background: #005F8C;
}


下記サンプルです。
http://digibot.jp/sample/000020.html

WEBFACTORYさんでした。。。。すごいね。簡単ですし。
http://digibot.jp/

本日のお勧め。コピーライトの奥深さを堪能しました。

ことばになりたい ことばになりたい

販売元:楽天ブックス
楽天市場で詳細を確認する



|

« table | トップページ | IE6 png透過 »

書籍・雑誌」カテゴリの記事

コメント

コメントを書く



(ウェブ上には掲載しません)




トラックバック

この記事のトラックバックURL:
http://app.f.cocolog-nifty.com/t/trackback/1194467/29724519

この記事へのトラックバック一覧です: さてHOVERの応用:

« table | トップページ | IE6 png透過 »