css div ul li ドロップダウン メニュー コード 2_html/css_WEB-ITnose
http://www.fzl-web.com/news/www/JSJL/2008/144.html より転載
body {
マージン : 0 ;
パディング: 30px ;
背景: #FFF ;
カラー: #666 ;
}
h1 {
フォント : 太字 16px Arial、Helvetica、サンセリフ ;
}
p {
font : 11px Arial、Helvetica、サンセリフ ;
}
a {
カラー: #900 ;
テキスト装飾: なし;
}
a:hover {
背景 : #900 ;
色: #FFF ;
}
/* Menu BeginのCSSコード: */
/* ルート=水平、セカンダリ=垂直 */
ul#navmenu {
マージン : 0 ;
境界線 : 0 なし ;
パディング: 0 ;
幅: 500ピクセル; /* KHTML の場合 */
list-style : none ;
高さ: 24px ;
}
ul#navmenu li {
マージン : 0 ;
境界線 : 0 なし ;
パディング: 0 ;
float : 左 ; /* Gecko の場合 */
display : inline ;
リスト形式: なし ;
位置 : 相対;
高さ: 24px ;
}
ul#navmenu ul {
マージン : 0 ;
境界線 : 0 なし ;
パディング: 0 ;
幅: 160ピクセル;
リスト形式: なし ;
表示 : なし ;
位置 : 絶対 ;
トップ: 24ピクセル;
左: 0 ;
}
ul#navmenu ul li {
float : none ; /* Gecko の場合 */
display : block ! important ;
表示: インライン; /* IE の場合 */
}
/* ルートメニュー */
ul#navmenu a {
border 1px solid #FFF ;
border-right-color : #CCC ;
border-bottom-color : #CCC ;
パディング: 0 6px ;
float : none !重要 ; /* Opera の場合 */
float : left ; /* IE の場合 */
display : block ;
背景: #EEE ;
カラー: #666 ;
フォント : 太字 10 ピクセル/22 ピクセル Verdana、Arial、Helvetica、サンセリフ ;
テキスト装飾: なし;
高さ : 自動 !重要 ;
高さ: 1% ; /* IE の場合 */
}
/* ルートメニュー ホバー永続性 */
ul#navmenu a:hover,
ul#navmenu li:hover a,
ul#navmenu li.iehover a {
background : #CCC ;
色: #FFF ;
}
/* 2nd Menu */
ul#navmenu li:hover li a,
ul#navmenu li.iehover li a {
float : なし ;
背景 : #EEE ;
カラー: #666 ;
}
/* 2nd Menu Hover Persistence */
ul#navmenu li:hover li a:hover,
ul#navmenu li: hover li:hover a,
ul#navmenu li.iehover li a:hover,
ul# navmenu li.iehover li.iehover a {
background : #CCC ;
色: #FFF ;
}
/* 3rd Menu */
ul#navmenu li:hover li:hover li a,
ul#navmenu li.iehover li。 iehover li a {
背景 : #EEE ;
カラー: #666 ;
}
/* 3rd Menu Hover Persistence */
ul#navmenu li:hover li:hover li a:hover,
ul#nav menu li:hover li:hover li:hover a,
ul#navmenu li.iehover li。 iehover li a:ホバー、
ul#navmenu li.iehover li.iehover li.iehover a {
背景 : #CCC ;
色: #FFF ;
}
/* 4番目 メニュー */
ul#navmenu li:hover li:hover li:hover li a,
ul#navmenu li.ie hover li.iehover li.iehover li a {
background : #EEE ;
カラー: #666 ;
}
/* 4番目 メニュー ホバー */
ul#navmenu li:hover li:hover li:hover li a:hover,
ul#navメニュー li.iehover li.iehover li.iehover li a:hover {
背景 : # CCC;
色: #FFF ;
}
ul#navmenu ul ul,
ul#navmenu ul ul ul {
表示 : なし ;
位置 : 絶対 ;
トップ : 0 ;
左: 160ピクセル;
}
/* 移動しないでください - 表示:Gecko の場合はブロックする必要があります */
ul#navmenu li:hover ul ul,
ul#navmenu li:hover ul ul ul,
ul#navmenu li.iehover ul ul,
ul#navmenu li.iehover ul ul ul {
表示 : なし ;
}
ul#navmenu li:hover ul,
ul#navmenu ul li:hover ul,
ul#navmenu ul ul li:hover ul,
ul#navmenu li.iehover ul,
ul#navmenu ul li.iehover ul ,
ul#navmenu ul ul li.iehover ul {
display : block ;
}
navHover = function () {
var lis = document.getElementById( " navmenu " ).getElementsByTagName( " LI " );
for ( var i = 0 ; i lis[i].onmouseover = function () {
this .className += " iehover " ;
lis[i].onmouseout = function () {
this .className = this .className.re place( new RegExp( " iehover\b " ), "" );
if (window.attachEvent) window.attachEvent( " onload " , navHover);
CSS メニュー - 水平
ブログ
仕事 +
ウェブサイト +
qrayg
qアーケード
qLoM 🎜 qDT a > li >
ペンとインク
無料インターフェース
+ を学ぶ
アクアボタン
アクアボタン2
ウォータードロップ
lightFX
lightFX2
CSS +
フッタースティック
spriteNav
@import
情報
お問い合わせ