プルダウンメニュー

■動作ブラウザ　【 IE:-　 NN:7.0　 Safari:1.0】　■CSSバージョン【-】
Internet Explorer Netscape Navigator Opera iCab Safari
3.0x 4.0x 4.5 5.0x 5.5 6.0 2.0x 3.0x 4.0x 4.x 6.0 7.0 7.x 2.x 1.x
Windows × × - × × × × × × × × ○ ○ - -
Macintosh × × × × - - × × × × × ○ ○ × ○
UNIX - - - - - - × × × × × ○ ○ - -

ポイント .type1 { clip:rect(通常の状態の表示範囲を指定) }
.type1:hover { clip:rect(メニュー項目全部が見えるように範囲を指定) }
説　　明 プルダウンメニューを表示するにはclipを使います。あらかじめ見せたくない項目部分をclipを使って表示範囲を指定しておきます。範囲はrect(上 右 下 左)の順番に座標を指定します。マウスが載った場合はhoverを使い、clip範囲をメニュー項目が全部見えるように指定しなおします。Internet Explorerではauto指定ができますが、他ブラウザでは正常に機能しないので座標値で指定します。
サンプル <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
<head>
<title>プルダウンメニュー</title>
<style type="text/css"><!--
.type1 {
position:absolute;
font-size:12px;
line-height:15px;
width:80px;
background-color:yellow;
clip:rect(0px 80px 15px 0px);
}
.type1:hover {
clip:rect(0px 80px 150px 0px);
};
--></style>
</head>
<body>
<div class="type1">
■検索<br>
　<a href="http://www.yahoo.co.jp/">Yahoo!</a><br>
　<a href="http://www.google.co.jp/">Google</a><br>
　<a href="http://www.goo.ne.jp/">goo</a><br>
　<br>
</div>
</body>
</html>
補足説明 なし

■サンプルを実行する　>>実行
 ■各ブラウザでの動作結果を見る　>>View!