コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > CSSチュートリアル > 本文

完全な CSS ポップアップ メニュー

高洛峰
リリース： 2016-11-24 14:49:34
オリジナル
1443 人が閲覧しました





/* 共通のスタイル */
.menu {font-family: arial、sans-serif;幅:750ピクセル;位置:相対;マージン:0;フォントサイズ:11px; margin:50px 0;}
.menu ul li a, .menu ul li a:visited {display:block;テキスト装飾:なし;色:#000;幅:104px;高さ:20ピクセル;テキスト整列:中央;色:#fff;ボーダー:1px ソリッド #fff;背景:#710069;行の高さ:20px;フォントサイズ:11px; overflow:hidden;}
.menu ul {padding:0;マージン:0;リスト スタイル タイプ:なし; }
.menu ul li {float:left;マージン右:1px; Position:relative;}
.menu ul li ul {display: none;}


/* IE 以外のブラウザに固有 */
.menu ul li:hover a {color:#fff;背景:#36f;}
.menu ul li:hover ul {display:block;位置:絶対;上:21ピクセル;左:0; width:105px;}
.menu ul li:hover ul li a.hide {background:#6a3; color:#fff;}
.menu ul li:hover ul li:hover a.hide {background:#6fc; color:#000;}
.menu ul li:hover ul li ul {display: none;}
.menu ul li:hover ul li a {display:block;背景:#ddd; color:#000;}
.menu ul li:hover ul li a:hover {background:#6fc; color:#000;}
.menu ul li:hover ul li:hover ul {display:block;位置:絶対;左:105ピクセル; top:0;}
.menu ul li:hover ul li:hover ul.left {left:-105px;}




< ;/head>