ホームページ > php教程 > php手册 > PHPサイドのプルダウンメニューは美しく、左右に拡大可能、FF、IEをサポート

PHPサイドのプルダウンメニューは美しく、左右に拡大可能、FF、IEをサポート

WBOY
リリース: 2016-06-13 12:20:53
オリジナル
883 人が閲覧しました


IE8必须增加子菜单,隐藏

复制代码 代码如下:






CSS 文例

复制代代码如下:


UL {
PADDING-右: 0px;パディング左: 0px;パディングボトム: 0px;マージン: 0px;パディングトップ: 0px; LIST-STYLE-TYPE: none
}
LI {
PADDING-RIGHT: 0px;パディング左: 0px;パディングボトム: 0px;マージン: 0px;パディングトップ: 0px; LIST-STYLE-TYPE: none
}
.c_l {
FLOAT: left;幅: 200ピクセル;背景:url(../images/right_menu_bg.jpg);
}
.menu {
Z-INDEX: 9999;マージン-ボトム: 10px;幅: 198ピクセル;
}
.menu LI {
FONT-WEIGHT: 太字;FLOAT: 左;幅: 198ピクセル;行の高さ: 26px;高さ: 26px ;
/*
背景: url(../images/line01.gif) リピート-x 50% 下;
*/
}
.menu LI A {
LINE-HEIGHT: 26px;高さ: 26px ;
/*
背景: url(../images/line01.gif) リピート-x 50% 下;
*/
}
#arrow{
背景: url(../images/aw02.gif) no-repeat 185px 10px;
行の高さ: 26px;高さ: 26px ;
}
.menu LI A:hover {
BACKGROUND: #eeeeee;行の高さ: 26px;位置: 相対的。高さ: 26px
}
.menu UL UL {
Z-INDEX: 9999;右: 185ピクセル;位置: 絶対的; TOP: -10000000px;background:url(../images/right_menu_bg.jpg);/*smallclass right kongzhi celafangxiang*/
}
.menu UL UL LI {
DISPLAY: block;フォントの重み: 通常。背景: url(../images/aw02.gif) 繰り返しなし 10px 10px;線の高さ: 25px!重要;トップ: 0px!重要;高さ: 25ピクセル!重要
}
.menu UL UL .b_top {
BORDER-LEFT-WIDTH: 0px;幅: 199ピクセル;
}
.menu UL UL .b_top A {
DISPLAY: ブロック
}
.menu A {
PADDING-RIGHT: 0px;表示: ブロック;パディング左: 0px;フロート: 左;パディングボトム: 0px;幅: 198ピクセル;テキストインデント: 18px;パディングトップ: 0px;テキスト装飾: なし
}
.menu A:visited {
PADDING-RIGHT: 0px;表示: ブロック;パディング左: 0px;フロート: 左;パディングボトム: 0px;幅: 198ピクセル;テキストインデント: 18px;パディングトップ: 0px;テキスト装飾: なし
}
.menu UL UL LI A {
表示: ブロック;背景: なし透明スクロール繰り返し 0% 0%。色: #000;トップ: 0px!重要;高さ: 25ピクセル!重要
}
.menu UL UL LI A:visited {
DISPLAY: ブロック;背景: なし透明スクロール繰り返し 0% 0%。色: #000;トップ: 0px!重要;高さ: 25ピクセル!重要
}
.menu UL UL LI A:hover {
DISPLAY: ブロック;背景: url(../images/aw02.gif) #eee no-repeat 10px 10px;幅: 198ピクセル;色: #d15400;ボーダートップスタイル: なし。ボーダー右スタイル: なし。ボーダー左スタイル: なし。トップ: 0px!重要;高さ: 25ピクセル!重要; BORDER-BOTTOM-STYLE: none
}
.menu TABLE {
PADDING-RIGHT: 0px;パディング左: 0px;パディングボトム: 0px;幅: 0ピクセル;パディングトップ: 0px; BORDER-COLLAPSE: 折りたたむ。 HEIGHT: 0px
}
* HTML .menu A:hover {
POSITION: 相対
}
.menu LI:hover {
POSITION: 相対
}
.menu UL :hover UL {
TOP: -1px
}
.menu UL LI:hover > A {
背景: #eee;位置: 相対的。テキスト装飾: なし
}
.menu UL LI UL LI:hover > A {
BORDER-TOP-STYLE: なし;ボーダー右スタイル: なし。ボーダー左スタイル: なし。位置: 相対的。トップ: 0px; BORDER-BOTTOM-STYLE: none
}


その中メニュー UL UL の左または右制御右または左显表示子菜单
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のおすすめ
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート