CSS レイアウトの例: 優れた CSS+JS 2 レベルのメニュー

<DIV id=xcx_tabmenu>
<DIV クラス=cx_tabmenu id=cx_tabmenu>
<DIV id=ddimagetabs>
<A href="http://www.downcodes.com/" target="_blank" class=sclink id=sclink1 onMouseOver="expandcontent('sc1', this)">ホーム</A>
<A class=sclink id=sclink2 onMouseOver="expandcontent('sc2', this)" href="#">会社</A>
<A class=sclink id=sclink3 onMouseOver="expandcontent('sc3', this)" href="#">製品</A>
<A class=sclink id=sclink4 onMouseOver="expandcontent('sc4', this)" href="#">私たちの作品</A>
<A class=sclink id=sclink5 onMouseOver="expandcontent('sc5', this)" href="#">ニュース</A>
<A class=sclink id=sclink6 onMouseOver="expandcontent('sc6', this)" href="#">ストア</A> </DIV>
<BR style="CLEAR: 左">
<DIV id=tabcontentcontainer>
<DIV class=tabcontent id=sc1></DIV>
<DIV class=tabcontent id=sc2><A
href="http://www.downcodes.com/">当社について</A> <A
href="http://www.downcodes.com/">どうすればよいですか?</A> <A
href="http://www.downcodes.com/">チームの紹介</A> <A
href="http://www.downcodes.com/">当社と協力する理由</A> <A
href="http://www.downcodes.com/">品質ポリシー</A> <A
href="http://www.downcodes.com/">規約</A> <A
href="http://www.downcodes.com/">お客様の声</A> <A
href="http://www.downcodes.com/">Clexus ツアー</A> </DIV>
<DIV class=tabcontent id=sc3><A
href="#">クレサスプライベート
メッセージング</A> <A href="#">画像
ギャラリー</A> <A href="#">顧客
管理</A> <A
href="#">テンプレート
作品</A> </DIV>
<DIV class=tabcontent id=sc4><A
href="#">ウェブ
デザイン</A> <A
href="#">ウェブ
開発</A> <A
href="#">ロゴ
デザイン</A> <A
href="#">印刷
デザイン</A> </DIV>
<DIV class=tabcontent id=sc5><A
href="#">Clexus ニュース</A>
<A href="#">Joomla
ニュース</A> <A
href="#">一般ニュース</A>
</DIV>
<DIV class=tabcontent id=sc6></DIV>
</DIV></DIV></DIV>

本文{text-align:center}
.cx_tabmenu {
パディングトップ: 2px; 背景色: #474747;幅: 790px;
}
#ddimagetabs {
パディング左: 10px
}
#ddimagetabs A {
パディング右: 20 ピクセル; ボーダー上部: #666666 表示: インライン; フォント サイズ: 12 ピクセル; 行の高さ: 33 ピクセル; 2px; PADDING-TOP: 0px; フォントファミリー: Verdana、Arial、Sans-serif; TEXT-ALIGN: 中央;
}
#ddimagetabs A:ホバー {
ボーダートップ: #ffffff 1px ソリッド; 背景: url(../images/cx_menu_hover.jpg) #363636 リピートなしの中央下;
}
#ddimagetabs A.current {
ボーダートップ: #ffffff 1px ソリッド; 背景: url(../images/cx_menu_hover.jpg) #363636 リピートなしの中央下;
}
A.sclink:リンク {

}
A.sclink:訪問済み {

}
A.sclink:hover {

}
#sclink1 {

}
#ddimagetabs #sclink1 {

}
#ddimagetabs #sclink1:hover {
ボーダートップ: #ff9900 1px ソリッド
}
#ddimagetabs .current#sclink1 {
ボーダートップ: #ff9900 1px ソリッド
}
#sc1 A:リンク {

}
#sc1 A: 訪問しました {

}
#sc1 A:ホバー {

}
#ddimagetabs #sclink2 {

}
#ddimagetabs #sclink2:hover {
ボーダートップ: #990099 1px ソリッド
}
#ddimagetabs .current#sclink2 {
ボーダートップ: #990099 1px ソリッド
}
#sc2 A:リンク {

}
#sc2 A: 訪問しました {

}
#sc2 A:ホバー {

}
#ddimagetabs #sclink3 {

}
#ddimagetabs #sclink3:hover {
ボーダートップ: #0099cc 1px ソリッド
}
#ddimagetabs .current#sclink3 {
ボーダートップ: #0099cc 1px ソリッド
}
#sc3 A:リンク {

}
#sc3 A: 訪問しました {

}
#sc3 A:ホバー {

}
#ddimagetabs #sclink4 {

}
#ddimagetabs #sclink4:hover {
ボーダートップ: #78ba00 1px ソリッド
}
#ddimagetabs .current#sclink4 {
ボーダートップ: #78ba00 1px ソリッド
}
#sc4 A:リンク {

}
#sc4 A: 訪問しました {

}
#sc4 A:ホバー {

}
#ddimagetabs #sclink5 {

}
#ddimagetabs #sclink5:hover {
ボーダートップ: #99cccc 1px ソリッド
}
#ddimagetabs .current#sclink5 {
ボーダートップ: #99cccc 1px ソリッド
}
#sc5 A:リンク {

}
#sc5 A: 訪問しました {

}
#sc5 A:ホバー {

}
#ddimagetabs #sclink6 {

}
#ddimagetabs #sclink6:hover {
ボーダートップ: #999999 1px ソリッド
}
#ddimagetabs .current#sclink6 {
ボーダートップ: #999999 1px ソリッド
}
#sc6 A:リンク {

}
#sc6 A: 訪問しました {

}
#sc6 A:ホバー {

}
#ddimagetabs #sclink7 {
パディング右: 30 ピクセル; ボーダー上部: #ff0000 ソリッド; パディング左: 30 ピクセル; マージン左: 100 ピクセル;
}
#ddimagetabs #sclink7:hover {
ボーダートップ: #ef7777 1px ソリッド; 背景: url(../images/cx_menu_hover_my.jpg) #cf1919 リピートなし中央下
}
#ddimagetabs .current#sclink7 {
ボーダートップ: #ef7777 1px ソリッド; 背景: url(../images/cx_menu_hover_my.jpg) #cf1919 リピートなし中央下
}
#sc7 A:リンク {

}
#sc7 A: 訪問しました {

}
#sc7 A:ホバー {

}
#tabcontentcontainer {
背景: url(../images/sub_menu_bg.jpg) #fcfcfa リピート-x; 幅: 790 ピクセル; 高さ: 27 ピクセル
}
.tabcontent {
表示: なし、パディングトップ: 4px
}
.tabcontent A:リンク {
パディング右: 10 ピクセル; フォント サイズ: 11 ピクセル; カーソル: 行の高さ: 0 ピクセル;フォントファミリー: Verdana、Arial、Helvetica、サンセリフの高さ: 18 ピクセル;
}
.tabcontent A: 訪問済み {
パディング右: 10 ピクセル; フォント サイズ: 11 ピクセル; カーソル: 行の高さ: 0 ピクセル;フォントファミリー: Verdana、Arial、Helvetica、サンセリフの高さ: 18 ピクセル;
}
.tabcontent A:ホバー {
背景: url(../images/cx_submenu_hover_grey.jpg) リピートなし中央下色: #000000
}
#active_submenu {
背景: url(../images/cx_submenu_hover.jpg) #666666 リピートなし中央下色: #fff
}