position:absoluteが表示されない

質問

今adobeのspryメニューバー(垂直)を使用しているのですが、
position:absoluteを設定している要素がIEだと指定した場所でなく、
右端の方に表示されてしまいます。

<ul id="MenuBar3" class="MenuBar01">
<li><a class="MenuBarItemSubmenu" href="#"><img src="●○.gif" width="240" height="45" border="0" /></a>
<ul>
<li><a href="#">項目 1.1</a></li>
<li><a href="#">項目 1.2</a></li>
<li><a href="#">項目 1.3</a></li>
</ul>
</li>
</ul><br clear="left">

ここから▼
<ul>
<li><a href="#">項目 1.1</a></li>
<li><a href="#">項目 1.2</a></li>
<li><a href="#">項目 1.3</a></li>
</ul>
ここまで▲
が、ずれてしまいます。

ul.MenuBar01
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
cursor: default;
width: 240px;
float: left;
}

ul.MenuBar01 li
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
position: relative;
text-align: left;
cursor: pointer;
width: 240px;
}

ul.MenuBar01 ul
{
margin: 0 0 0 95%;
padding: 0;
list-style-type: none;
font-size: 100%;
position: absolute;
z-index: 1020;
cursor: default;
width: 210px;
left: -1000em;
top: 0;
}

色々調べ、親要素にwidth: 100%;を入れたり、 position: absolute;の入ったところにclear:bothをいれたりもしたのですが、いっこうにIEが直ってくれません。

どのようにすれば正しく表示されるでしょうか？
どうぞアドバイスをお願い致します。

こちらのサイトを参考にしました。
http://jmblog.jp/archives/180
http://www.buzz727.jp/2007/12/ieabsolute.html

回答No.1

noris02 · ベストアンサー

略
<ul>
<li><a href="#">項目 1.1</a></li>
<li><a href="#">項目 1.2</a></li>
<li><a href="#">項目 1.3</a></li>
</ul>
</li>
<br style="clear:both;">　　　<!-- ←この文を色々移動させてみる-->
</ul>

としてみて　実験してみてください。

float　と position　で　IE6 だと absoluteの BOXが　消えてしまうバグの対処法を書きました。

お礼

ご回答ありがとうございます。

苦戦した結果、やはりfloat: left;が問題だったようで、
float: left;をul.MenuBar01ではなく#MenuBar3につけたら何故かIEでもちゃんと見ることが出来ました。

ありがとうございました！