CSSのみで作る横ドロップダウンメニュー

質問

教えてください。白旗です。
クライアントの指示でCSS＋xhtmlのみでサイトを作成していますが、横並びのプルダウンメニューで行き詰りました。
IE6以外のブラウザでは正常な表示をされるのですが、IE６のみへんてこりんになってしまいます。
下記ソースで、メニューAにマウスを乗せてドロップダウンをさせると、メニューBが右に動きます。
これに2日間はまってます。
よろしくお願いします。

---ソース---
【html】
<div id="gnavi_container">
<div id="gnavi">
<ul>
<li class="gmenu02_off" onmouseover="this.className='gmenu02_on'" onmouseout="this.className='gmenu02_off'"><a href="#"><img src="img/1.jpg" width="122" height="25" alt="" onmouseover='this.src="img/3.jpg"' onmouseout='this.src="img/1.jpg"' /></a>
<ul class="gmenu_sub">
<li><a href="#"><img src="img/4.jpg" width="138" height="19" alt="" /></a></li>
</ul>
</li>
<li class="gmenu03_off" onmouseover="this.className='gmenu03_on'" onmouseout="this.className='gmenu03_off'"><a href="#"><img src="img/2.jpg" width="81" height="25" alt="" onmouseover='this.src="img/2.jpg"' onmouseout='this.src="img/2.jpg"' /></a>
</li>
</ul>
　</div>
</div>

【css】
img{
border:0;
}

div#gnavi_container{
position : relative;
z-index:100;
width:800px;
height:25px;
text-align:left;
}

div#gnavi ul {
margin: 0;
padding: 0;
list-style: none;

}

div#gnavi li {
float : left;
margin : 0;
padding : 0;
}

.gmenu_sub li{
overflow:visible:
}

.gmenu02_off{
height:25px;
width:122px;
overflow : hidden;
}

.gmenu02_on{
width:122px;
overflow :visible;
}

.gmenu03_off{
height:25px;
width:81px;
overflow : hidden;
}

.gmenu03_on{
width:81px;
overflow :visible;
}

div#gnavi ul.gmenu_sub{
margin : 0;
padding : 0;
}

div#gnavi ul.gmenu_sub li{
margin : 0;
padding : 0;
float : none;
clear : both;
}

回答No.2

fujillin

#1です。
「125Px」 は　「138px」の書き間違いでした。

回答No.1

fujillin

＞クライアントの指示でCSS＋xhtmlのみでサイトを作成していますが、
って、おもいっきりスクリプト利用みたいですが、それでいいのでしょうか？

CSSはよくわかりませんが、幅122pxの要素のなかに幅125pxの画像を表示させた時に、IEは幅を合わせてしまうということなのかな…
IE6のCSSバグはいろいろあるみたいなのでご参考まで、
http://webtech-walker.com/archive/2007/05/21215114.html

ご提示のものだと、下にメインのコンテンツなどがあると仮定すると、ドロップダウンする度にレイアウトが下がることになるけれど、それもかまわないのでしょうか？
サブメニューはposition:absoluteなどにしておいて、表示/非表示が他に影響しないようにしておくとか…
親要素にposition:relativeを指定して、サブメニューをposition:absoluteにしておくとIE6では中身の幅が変わっても親が変動しなくなるけれど、そのままだと他のブラウザで表示される位置が違うみたい。
先人が、本当にCSSのみで実現しているものがあるはずなので、それらを参考にするのが近道かと思います。

とりあえず最初にみつかったもの。
　http://www.cssplay.co.uk/menus/final_drop.html
こちらは縦型になっているけれど十分参考になりそう。
　http://www.cssplay.co.uk/menus/example_flyout.html
（探せばほかにもいろいろあると思います）

お礼

ありがとうございました。
お陰さまで、解決いたしました。感謝します。