I've got the following menu.
<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>
The Css goes as following.
#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;
}
The issue is displayed on the following image.
How Can I fix this issue using my CSS. Please help me. Thank you.