<li>でドロップダウンボタンを真下表示するには？

質問

お世話になります。以下の問題を解決したいのですが、以下のソースでどこが間違っているのか教えていただけないでしょうか。
(1)メニューボタンをhoverすると、<ul><li>の下の階層のリスト<ul><li><ul><li>をドロップダウンボタンとしてそのボタンの真下に表示されるようにしたいのですが、横並びに配置されてしまいます。
親<ul>のdisplay:blockは<ul><li><ul>でdisplay:noneしているのですが、原因は何でしょうか？
またその際(2)hover時にドロップダウンボタンのlist-style-imgも一緒にロールオーバーさせたい。
(3)メニューが少し長いタイトルで2行になってもlist-style-img画像分は空白があるようにしたい。
という仕様を実然させたいのですが、どうかご教授いただけないでしょうか。
分かりやすく説明すると添付ファイルのようなことを実現させたいです。
よろしくお願いします。

HTML---

<div id="menu_nav">
<ul>
<li><a href="#"><img src="images/menu-nav/menu_navi-01.jpg" alt="説明文"/></a></li>
<li><img src="images/menu-nav/menu_navi-02.jpg" alt="ブライトが選ばれる理由" />
<ul>
<li><a href="#">豊富な施工実績</a></li>
<li><a href="#">完全自社施工<br />自慢の職人たち</a></li>
<li><a href="#">安心の保険制度</a></li>
</ul></li>
<li><img src="images/menu-nav/menu_navi-03.jpg" alt="説明文" />
<ul>
<li><a href="#">防水工事</a></li>
<li><a href="#">外壁塗装</a></li>
</ul></li>
<li><img src="images/menu-nav/menu_navi-04.jpg" alt="説明文" />
<ul>
<li><a href="#">実績01</a></li>
<li><a href="#">実績02</a></li>
</ul></li>
<li><img src="images/menu-nav/menu_navi-05.jpg" alt="説明文" />
<ul>
<li><a href="#">よくあるご質問</a></li>
<li><a href="#">お客様のお声</a></li>
</ul></li>
<li><img src="images/menu-nav/menu_navi-06.jpg" alt="説明文" />
<ul>
<li><a href="#">代表者挨拶</a></li>
<li><a href="#">会社概要</a></li>
<li><a href="#">個人情報保護について</a></li>
<li><a href="#">求人募集</a></li>
</ul></li>
<li><a href="#"><img src="images/menu-nav/menu_navi-07.jpg" alt="説明文" /></a></li>
</ul>
</div>

CSS---

#menu_nav {
clear:both;
height:56px;
background-image:url(../images/bg/bg_15.jpg);
background-repeat:repeat-x;
background-position:top center;
}
#menu_nav ul {
width:960px;
display:block;
list-style:none;
margin:auto;
padding:0;
}
#menu_nav ul li {
float:left;
position:relative;
}
#menu_nav ul li a {
clear:both;
display:block;
width:100%;
height:100%;
}
#menu_nav ul li ul {
display:none;
position:absolute;
top:56px;
left:0;
list-style-image:url(../images/contents/dropdown_btn_30.gif);
list-style-position:inside;
}
#menu_nav ul li ul li a {
color:#000000;
font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic,P r o " , " O s a k a " , " メイリオ" , " M e i r y o " , " Ｍ Ｓ Ｐ ゴシック","MSPGothic",sans-serif;
font-size:0.75em;
background-color:#FFFFFF;
width:125px;
padding:5px 5px 5px 5px;
border:1px solid #d83434;
text-align:left;
text-decoration:none;
}
#menu_nav ul li ul li a:hover {
color:#FFFFFF;
background:#d83434;
}
#menu_nav ul li:hover ul{
display:block;
}

回答No.1

ORUKA1951 · ベストアンサー

float:leftにしているからです。もちろんlist-style:imageでもダメです。list-styleとdisplayは競合します。--というか、list-styleを指定する場合はdisplay:list-itemです。
　floatを止めて、list-item/list-styleを指定します。

★9.7 'display'、'position'、'float'の関係（Relationships between 'display', 'position', and 'float'） ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/visuren.html#q24 )
★9.2.5 'display'プロパティ（The 'display' property） ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/visuren.html#display-prop )
★12.6.2 リスト（Lists: the 'list-style-type', 'list-style-image', 'list-style-position', and 'list-style' properties） ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/generate.html#lists )