階層型ドロップダウンメニューのサブ項目CSSの背景色の指定について

メニューバーにサブ項目を作り、hover,active,時のbackground-colorを指定したいのですが、うまくいきません。
◆http://haradesignroom.jp/0909menu_bar/0909renewa …

Web制作関連の雑誌に出ていたフォーマットを元に上記のメニューバーを作りました。
第一階層には背景画像を配し、hover,activeのときに別画像を設定しました。
６項目のうち、サブメニューがある（商品情報など）にマウスをおくと、グレーの背景色のサブメニューが表示されるまでは良いのですが、サブメニュー各項目にマウスを置くと、第一階層の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 ベストアンサー 回答者： salonpath 回答日時： 2009/09/08 03:44

・参照ファリルがリンク先にありません。

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 …

お礼日時：2009/09/08 04:09