質問: ドロップダウンするグローバルナビの選択時の色変更について hpを制作しております。 一部ドロップダウンするグローバルナビでメニューを作ったのですが 現在選択しているページを等として cssで定義して自動でマウスオン時と同じ色になる(背景は画像が変わる)ように設定しています。 添付画像の紫色の四角は文字を塗り消しただけですので気にしないでください。 通常時、プルダウンしたメニューはマウスオンで色が変わります。 しかし、現在選択しているページのメニューをプルダウンすると こちらも自動で選択時の色に変ってしまっています。しかも、画像が端まで足りていない......。 これを通常時と同じようにするにはどうしたらよいのでしょうか? プルダウンメニューはすべてマウスオンでしか色が変わらない様にしたいです。 選択しているページは自動で色が変わるままで。 以下はソースです。 宜しくお願いします。 html * メニュー1 * メニュー2 + メニュー2-1 + メニュー2-2 * メニュー3 + メニュー3-1 + メニュー3-2 * メニュー4 * メニュー5 * メニュー6 * メニュー7 css #dropmenu{ list-style-type: none; width: 949px; height: 42px; margin: 0px auto 10px; padding: 0; background: url(画像) no-repeat; } #dropmenu li{ position: relative; width: 14.07%; float: left; margin: 0; padding: 0; text-align: center; background: url(画像) no-repeat; border-right: 1px solid #aaa; border-left: 1px solid #fff; } #dropmenu li a{ display: block; margin: 0; padding: 15px 0 11px; color: #000080; font-size: 15px; line-height: 1; text-decoration: none; height: 24px; } #dropmenu li:hover > a{ background: url(画像) ; color: #fff; } #dropmenu li ul{ list-style: none; position: absolute; top: 100%; left: 0; margin: 0; padding: 0; } #dropmenu li:last-child ul{ left: -100%; width: 100% } #dropmenu li ul li{ overflow: hidden; width: 150%; height: 0; color: #fff; -moz-transition: .2s; -webkit-transition: .2s; -o-transition: .2s; -ms-transition: .2s; transition: .2s; } #dropmenu li ul li a{ padding: 13px 15px; background: url(画像) ; text-align: left; font-size: 14px; font-weight: normal; } #dropmenu li:hover ul li{ height: 40px; border-top: 1px solid #fff; border-bottom: 1px solid #aaa; } #dropmenu li:hover ul li:first-child{ border-top: 0; } #dropmenu li:hover ul li:last-child{ border-bottom: 0; } #dropmenu li:hover ul li:last-child a{ border-radius: 0 0 3px 3px; } body#pege01 ul li#li01 a, body#pege02 ul li#li02 a, body#pege03 ul li#li03 a, body#pege04 ul li#li04 a, body#pege05 ul li#li05 a, body#pege06 ul li#li06 a, body#pege07 ul li#li07 a{ display: block; background: url(画像) no-repeat; color: #fff; margin: 0px; }
回答: スタイルシートです。文書構造に基づいてきちんと子孫セレクタや属性セレクタを使って書かれているので、いちいちhtml見なくてもわかるはずです。 説明は簡単に書いてありますが、詳細は仕様書を確認してください。仕様書に書かれている内容は聞かない・・くらいのつもりでないと身につきません。 ★タブは_に置換してあるので戻す。 ★リキッドですからスマホでも幅広ディスプレイでも利用できる ★html側の指定を とすると携帯電話や印刷機には適用されません。 @charset "shift_jis"; /* 基本的な指定 */ html,body{margin:0;padding:0;} h1,h2,h3,h4,h5,h6{margin:0;line-height:1.6em;} p{text-indent:1em;} div.header,div.section,div.footer{ width:90%;min-width:630px;max-width:900px; margin:0 auto;padding:5px; } /* ここからプルダウンメニュー */ div.header div.nav{/* header内にあるナビゲーションの指定 */ _font-size:0.9em; _text-align:center; _line-height:2em; } div.header div.nav ul{ _list-style-type:none; _margin:10px 0;padding:0; _font-size:0;/* リンクの隙間 */ } div.header div.nav ul li{/* このように文書構造に基づいてセレクタを書く */ _display:inline-block;/* floatではなくinline-blockです */ _margin:0;padding:0;height:2em; _font-size:medium;/* フォントサイズを戻す */ _width:14%;/* 100/7は14.2% */ _position:relative;/* 以下の位置やサイズの基準になる */ } div.header div.nav ul li ul{ _position:absolute; _top:2em;left:0;width:100%; _margin:0; _display:none; } div.header div.nav ul li ul li{ _display:block;width:100%; } /* 動作に伴う色の変更(わかりやすいように別記した) */ div.header div.nav ul li:hover ul{ _display:block; } div.header div.nav ul li a{ _display:block; _width:100%;height:100%; _text-decoration:none; _background: linear-gradient(white, gray); } div.header div.nav ul li a:hover{ _background: linear-gradient(white, aqua); }