![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?e8efa67)
![](http://oshiete.xgoo.jp/images/v2/common/profile/M/noimageicon_setting_04.png?e8efa67)
メニューバーにサブ項目を作り、hover,active,時のbackground-colorを指定したいのですが、うまくいきません。
◆http://haradesignroom.jp/0909menu_bar/0909renewa …
Web制作関連の雑誌に出ていたフォーマットを元に上記のメニューバーを作りました。
第一階層には背景画像を配し、hover,activeのときに別画像を設定しました。
6項目のうち、サブメニューがある(商品情報など)にマウスをおくと、グレーの背景色のサブメニューが表示されるまでは良いのですが、サブメニュー各項目にマウスを置くと、第一階層のhoverの画像が表示されてしまいます。またサブメニューの下欄の項目が表示されません。
サブメニューがhover、active状態のときに、さらに別色(#FFCCCC)で指定したいのですが、CSSの書き方がわかりません。
どなたかご教示お願いいたします。
【CSS】
* { margin: 0; padding: 0; }
body{
font-family: Helvetica, Sans-Serif;
font-size: 12px;
padding-bottom: 15px;
}
#page-wrap{
width: 800px;
margin-top: 25px;
margin-right: auto;
margin-bottom: 25px;
margin-left: auto;
}
a{ text-decoration: none; }
ul{
list-style: none;
background-repeat: repeat-x;
}
p { margin: 15px 0; }
/* LEVEL ONE*/
ul.dropdown {
position: relative;
border-top-width: medium;
border-right-width: medium;
border-bottom-width: medium;
border-left-width: medium;
border-top-style: none;
border-right-style: none;
border-left-style: none;
}
ul.dropdown li {
font-weight: bold;
float: left;
background-image: url(../images/menu_bk.jpg);
height: 40px;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #CCCC99;
border-left-width: 1px;
border-left-style: solid;
border-left-color: #FFFFFF;
}
ul.dropdown a:hover {
color: #993333;
background-image: url(../images/menu_on_bk.jpg);
}
ul.dropdown a:active {
color: #993333;
background-image: url(../images/menu_on_bk.jpg);
}
ul.dropdown li a {
display: block;
color: #666666;
border-right-style: none;
border-left-style: none;
padding-top: 20px;
padding-right: 30px;
padding-bottom: 4px;
padding-left: 30px;
border-top-style: none;
border-bottom-style: none;
}
ul.dropdown li:last-child a {
border-right: none;
}
/* Doesn't work in IE */
ul.dropdown li:first-child a {
border-left: none;
}
/* Doesn't work in IE */
ul.dropdown li.hover,
ul.dropdown li:hover {
color: #666666;
position: relative;
background-color: #D2D2D2;
}
ul.dropdown li.hover a {
color: #993333;
}
/*
LEVEL TWO
*/
ul.dropdown ul { width: 220px; visibility: hidden; position: absolute; top: 100%; left: 0; }
ul.dropdown ul li {
font-weight: normal;
color: #FFFFFF;
border-bottom: 1px solid #ccc;
float: none;
background-repeat: repeat-x;
background-image: url(../images/transparent02.jpg);
float:none;
}
/* IE 6 & 7 Needs Inline Block */
ul.dropdown ul li a{
border-right: none;
width: 100%;
display: inline-block;
color: #FFFFFF;
}
/* LEVEL THREE*/
ul.dropdown ul ul { left: 100%; top: 0; }
ul.dropdown li:hover > ul {
visibility: visible;
color: #FFFFFF;
}
◆ 長々申し訳ありませんが、どなたかよろしく お願いいたします。◆
No.1ベストアンサー
- 回答日時:
・参照ファリルがリンク先にありません。
http://haradesignroom.jp/0909menu_bar/0909renewa …
・サブメニューってどこですか?
cssでいうところの/*LEVEL TWO*/あたりですか?
それとも/* LEVEL THREE*/あたりですか?
参考URLも無効で、どんなhtmlかも公表されてないうえに、呼び方も統一されてないと、なかなか適切な回答が得られないと思います
また、HTMLやWeb Page Designのような内容に沿ったカテゴリーに投稿したほうが詳しい方の目にとまりやすいので、次回から気をつけたほうがいいと思います。
とりあえずこれでどうでしょうか?
ul.dropdown ul li a:hover,
ul.dropdown ul li a:active{
background:#fcc;
}
salonpath様
投稿カテゴリが違っていたのですね。情報を整理して出直します。
またURLは以下でした。
お詫びとお礼申し上げます。
http://hara-designroom.jp/0909menu_bar/0909renew …
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- PHP style.cssのjQuery条件付きcssが機能しない 4 2022/07/17 18:27
- HTML・CSS アコーディオンメニューが思うように動作しません。 1 2023/08/20 16:48
- HTML・CSS HTML & CSS 縦ボックス内の文字の左右センタリング 3 2023/03/25 04:23
- HTML・CSS CSS のみのタブ切り替えについて 1 2023/01/11 16:47
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- HTML・CSS テキストを画面の真ん中に配置したいです。 2 2022/11/25 16:11
- HTML・CSS cssの display: flex;で横並びにならずに困ってます 1 2022/12/04 13:18
- JavaScript vertical sliderをautoplayしたい 2 2022/08/25 14:47
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
ワードにコピペ、画像が表示さ...
-
htmlの文字が縦書きになる
-
HRタグ 枠線を透明にするには?
-
form input テキストを上下中央...
-
含む含まないという概念自体の...
-
textareaの幅を画面と合わせたい
-
htmlのolやulなどlistにtitleや...
-
CSS:animation開始位置の設定
-
<div id="container">の使いか...
-
【ヒトの神秘】美男美女から何...
-
ラジオボタンの装飾(色の違う2...
-
favicon.ico はもういらない?
-
smallにtext-allignが効かない
-
tdに対してmin-heightの定義、...
-
VBAでの素数の求め方
-
訪問済のリンク色を変えない方法
-
「・」(黒い点)を非表示にした...
-
1サイト内にHTML5とXHTMLが混在...
-
<table>の高さ固定。情報増加時...
-
idの中のid指定
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
ワードにコピペ、画像が表示さ...
-
ドリームウィーバーでリスト作...
-
リストの画像をくっつけたい!
-
ホームページビルダー14でメニ...
-
CSSのどの部分を変更すると...
-
光沢のあるボタンの作り方について
-
IEの時に空白ができてしまします。
-
CSSの外部参照について。
-
CSSの継承について...
-
箇条書きで表される点がずれる...
-
Firefoxだとメニューバーが崩れ...
-
CSSのposition指定で親要素の背...
-
SEO対策について
-
階層型ドロップダウンメニュー...
-
htmlの文字が縦書きになる
-
HTML属性での「""」 「''」違い
-
htmlのolやulなどlistにtitleや...
-
widthやheightの数値に単位(px...
-
【ヒトの神秘】美男美女から何...
-
<h1>、<h2>と<p><div>の行間を...
おすすめ情報