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  
 
 
 
 
情報  
お問い合わせ