css div ul li ドロップダウン メニュー コード 2_html/css_WEB-ITnose
Jun 24, 2016 pm 12:32 PM
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 メニュー - 水平 h1 > ?
?
?
ブログ a > li > ?
仕事 + a > ?
?
ウェブサイト + a > ?
?
qrayg a > li > ?
qアーケード a > li > ?
qLoM a > li > ? ?????????????????????????????? qDT a > li > ?
ul > ?
li > ?
ペンとインク a > li > ?
無料インターフェース a > li > ?
ul > ?
li > ?
+ a > を學ぶ ?
?
?
アクアボタン a > li > ?
アクアボタン2 a > li > ?
ウォータードロップ a > li > ?
lightFX a > li > ?
lightFX2 a > li > ?
ul > ?
li > ?
CSS + a > ?
?
フッタースティック a > li > ?
?????????????????????????? spriteNav a > li > ?
@import a > li > ?
ul > ?
li > ?
ul > ?
li > ?
情報 a > li > ?
お問い合わせ a > li > ?
ul > ?
ボディ> ?