HTML代コード：
ソースコード例
<div id=”nav”>
<ul>
<li class=”menu2″ onMouseOver=”this.className='menu1'” onMouseOut=”this.className='menu2'”>我の首页
<div class=”リスト”>
<a href=”http://www.onlygrape.com/”>葡萄子</a><br />
<a href=”#”>我的首页</a><br />
<a href=”#”>我的日志</a><br />
<a href=”#”>我的日志</a><br />
<a href=”#”>我的相册</a><br />
<a href=”#”>我的收藏</a><br />
</div>
</li>
<li class=”menu2″ onMouseOver=”this.className='menu1'” onMouseOut=”this.className='menu2'”>社区圈子
<div class=”リスト”>
<a href=”http://www.onlygrape.com/”>葡萄子</a><br />
<a href=”#”>我的首页</a><br />
<a href=”#”>我的日志</a><br />
<a href=”#”>我的相册</a><br />
<a href=”#”>我的收藏</a><br />
</div>
</li>
<li class=”menu2″ onMouseOver=”this.className='menu1'” onMouseOut=”this.className='menu2'”>我的短信
<div class=”リスト”>
<a href=”http://www.onlygrape.com/”>葡萄子</a><br />
<a href=”#”>我的相册</a><br />
<a href=”#”>我的收藏</a><br />
</div>
</li>
<li class=”menu2″ onMouseOver=”this.className='menu1'” onMouseOut=”this.className='menu2'”>账户管理
<div class=”リスト”>
<a href=”http://www.onlygrape.com/”>葡萄子</a><br />
<a href=”#”>我的首页</a><br />
<a href=”#”>我的日志</a><br />
<a href=”#”>我的相册</a><br />
<a href=”#”>我的收藏</a><br />
<a href=”#”>我的日志</a><br />
<a href=”#”>我的相册</a><br />
<a href=”#”>我的收藏</a><br />
</div>
</li>
</ul>
</div>
ソース コードの例は、
以下の HTML によく似ています。
クラス=”メニュー2”
onMouseOver=”this.className='menu1'”
onMouseOut=”this.className='menu2'”
下を見るCSS代コード：
ソースコード例
体{
背景色:白;
フォントサイズ:12px;
フォントファミリー:Arial、Helvetica、サンセリフ;
マージン:0px;
パディング:0px;
色:白;
}
ウル、リー{
マージン:0px;
パディング:0px;
}
リ{
表示:インライン;
リストスタイル:なし;
リストスタイルの位置:外側;
テキスト整列:中央;
フォントの太さ:太字;
フロート:左;
}
a:リンク{
色:#336601;
テキスト装飾:なし;
フロート:左;
幅:100ピクセル;
パディング:3px 5px 0px 5px;
}
a:訪問しました{
色:#336601;
テキスト装飾:なし;
フロート:左;
パディング:3px 5px 0px 5px;
幅:100ピクセル;
}
a:ホバー{
色:白;
フロート:左;
パディング:3px 3px 0px 20px;
幅:88ピクセル;
テキスト装飾:なし;
背景色:#539D26;
}
a:アクティブ{
色:白;
フロート:左;
パディング:3px 3px 0px 20px;
幅:88ピクセル;
テキスト装飾:なし;
背景色:#BD06B4;
}
#ナビ{
幅:600ピクセル;
高さ:30ピクセル;
ボーダーボトム:0px;
パディング:0px 5px;
位置:絶対;
z インデックス:1;
左: 198ピクセル;
上: 25ピクセル;
}
。リスト{
行の高さ:20px;
テキスト整列:左;
パディング:4px;
フォントの太さ:標準;
}
.menu1{
幅:120ピクセル;
高さ:自動;
マージン:6px 4px 0px 0px;
ボーダー:1px ソリッド #9CDD75;
背景色:#F1FBEC;
色:#336601;
パディング:6px 0px 0px 0px;
カーソル:手;
オーバーフロー-y:非表示;
フィルター:アルファ(不透明度=70);
-moz-不透明度:0.7;
}
.menu2{
幅:120ピクセル;
高さ:18ピクセル;
マージン:6px 4px 0px 0px;
背景色:#F5F5F5;
色:#999999;
ボーダー:1px ソリッド #EEE8DD;
パディング:6px 0px 0px 0px;
オーバーフロー-y:非表示;
カーソル:手;
}