CSSテクニックコミュのCSSドロップダウンメニュー＋背景置換

はじめまして。いつもこちらのコミュで勉強させていただいております。

今、知人の依頼をうけてサイトを作成中なのですが、
メインのナビゲーションをこのMoMAのサイトhttp://www.momaonlinestore.jp/のように
マウスオーバーで下にサブメニューがドロップダウンされる形式を希望されています。

あるサイトを参考にさせていただいて、テキストのみの表示であれば、XTHML＋CSSで希望通りの動作が実現できたのですが（ただしIE用のJSを使用しています）
常に表示されているメニューのみを画像置換のロールオーバーにできなくて困っています。

ドロップダウンがないli（「HOME」）ではできますが、
ドロップダウンがあるli（「MENU1」など）では、ドロップダウン部分も背景画像が表示されてしまうという状態です。

できればロールオーバーはJSではなくCSSにしたいので（JSはほとんどわかりません）解決策がおわかりになる方がおられましたら、ご指導いただけますでしょうか。
また、内容が不適切であればお知らせください。
よろしくお願いいたします。

※なお、現段階では表示確認はWinXP＋FF2（IE6）のみなので他環境の方には再現できないかもしれないのですが･･･
他ブラウザの方用には今後対策を考えます。

/* CSS */
#navicontainer{
margin:0;
padding:0;
width:450px;
height:40px;
background-color: #BCD2EE;
position: relative;
font-size:14px;
z-index:9999;
}
#navicontainer ul,
#navicontainer li{
list-style:none;
margin:0;
padding:0;
display: block;
position: relative;
}
#mainlist li,
#mainlist li a{
width: 90px;
height:40px;
}
#mainlist li{
float:left;
}
#sublist1 li,
#sublist2 li,
#sublist3 li,
#sublist4 li,
#sublist1 li a,
#sublist2 li a,
#sublist3 li a,
#sublist4 li a{
height:30px;
text-indent:0.8em;
line-height:1.8em;
border-left:0px solid #eeeeee;
border-right:0px solid #eeeeee;
}
#sublist1 li,
#sublist1 li a{
width: 130px;
}
#sublist2 li,
#sublist2 li a{
width: 160px;
}
#sublist3 li,
#sublist3 li a{
width: 150px;
}
#sublist4 li,
#sublist4 li a{
width: 180px;
}

#mainlist li.plist ul{
display:none;
position:absolute;
font-size:12px;
}

#mainlist li.plist:hover > a{
background:#FFFFFF;
}
#mainlist li.plist:hover ul{
display: block;
}
#mainlist li.plist li{
float:none;
display:list-item;
}
#mainlist li a{
display: block;
text-indent:0.8em;
line-height:1.8em;
color:#333333;
background :#E0EEEE;
text-decoration:none;
}
#mainlist li a:hover{
color:#4A708B;
background-color:#FFFFFF;
}


/*背景画像指定*/

#m_home a:link,
#m_home a:hover{
background: transparent url(img/menu/m_home.gif) left top no-repeat;
width: 90px;
height: 40px;
text-indent:-9999px;
}
#m_home a:hover{
background-position:0 -40px;
}


#m_01 a:link,
#m_01 a:hover{
background: transparent url(img/menu/m_01.gif) left top no-repeat;
width: 90px;
height: 40px;
text-indent:-9999px;
}
#m_01 a:hover{
background-position:0 -40px;
}

<-- 以下がXHTMLです　　-->

<div id="navicontainer">
<ul id="mainlist">
<li id="m_home"><a href="#">HOME</a></li>

<li id="m_01" class="plist"><a href="#">MENU1</a>
<ul id="sublist1">
<li><a href="#">submenu</a></li>
<li><a href="#">submenu</a></li>
<li><a href="#">submenu</a></li>
<li><a href="#">submenu</a></li>
<li><a href="#">submenu</a></li>
</ul>
</li>
<li class="plist"><a href="#">MENU2</a>
<ul id="sublist2">
<li><a href="#">submenu</a></li>
<li><a href="#">submenu</a></li>
<li><a href="#">submenu</a></li>
<li><a href="#">submenu</a></li>
<li><a href="#">submenu</a></li>
</ul>
</li>
<li class="plist"><a href="#">MENU3</a>
<ul id="sublist3">
<li><a href="#">submenu</a></li>
<li><a href="#">submenu</a></li>
<li><a href="#">submenu</a></li>
<li><a href="#">submenu</a></li>
<li><a href="#">submenu</a></li>
</ul>
</li>
<li class="plist"><a href="#">MENU4</a>
<ul id="sublist4">
<li><a href="#">submenu</a></li>
<li><a href="#">submenu</a></li>
<li><a href="#">submenu</a></li>
<li><a href="#">submenu</a></li>
<li><a href="#">submenu</a></li>
</ul>
</li>
</ul>
<script type="text/javascript" src="js/menuscript.js"></script>
</div>