html - パンくずリスト画像の配置エラー

Question

以下のメニューができました。

<ul>
<li><img src="images/item_grp_nav_img.jpg" alt="nav-image">Home</li>
<li>Menu Type</li>
<li>Menu Type</li>
<li>Menu Type</li>
</ul>

Css は次のようになります。

#item-group-navigation{
height: 30px;
background-color:#949698;
min-width:760px;
}

#item-group-navigation ul{
height: 100%;
width: 30%;
padding: 0px 0px 0px 15px;
margin: 0px;
}

#item-group-navigation li{
float: left;
list-style: none;
display: block;
padding: 3px 6px 0px 5px;
color: white;
font-size: 18px;
font-family:MyriadProReg;
}

#item-group-navigation li:first-child:before{
content:none;
}

#item-group-navigation li:before{
display: block;
width: 20px;
height: 30px;
content: url('../images/list_arrow.jpg');
float: left;
}

#item-group-navigation img{
float: left;
}

問題は次の画像に表示されます。

CSS を使用してこの問題を解決するにはどうすればよいですか。私を助けてください。ありがとうございました。

Answer 1

問題が見つかりました！あるべきではない高さと幅を定義してしまいました! それを経験している人に感謝します！

Answer 2

幅を広げ#item-group-navigation ulます。