CSS 오류 또는 IE 호환성 문제?

첨부 된 스크린 샷에서 원으로 그어진 이미지가 포함 된 기본 메뉴 드롭 다운에 예기치 않은 이상한 아이콘이 표시됩니다. 이 문제는 IE 8, IE 9, IE 10에서도 지속됩니다. 고맙게도 IE 11이 아닙니다. Link to the website CSS 오류 또는 IE 호환성 문제?

호환성 문제 또는 CSS 오류? 아니면 doctype 선언이 있습니까? 내 doctype 선언은 다음과 같습니다. <meta http-equiv="X-UA-Compatible" content="IE=9,chrome=1">

나는 drop-down plugin의 수정 된 버전을 사용하고 있습니다.

드롭 다운에서 각 메뉴 항목은 다음과 같습니다

<li id="li1" class="li-img"> 
    <a class="alink" href="somelink.html"></a> 
    <img class="img-fade"> 
</li> 


.li-img{ 
color: #ffffff; 
font-weight: bold; 
width: 25%; 
height: 80px; 
margin: 0px; 
} 

.alink{ 
position: absolute; 
top: 10px; 
left: 10px; 
opacity: 1 !important; 
z-index: 1000; 
} 

.img-fade{ 
-webkit-transition: opacity 0.25s ease-in-out; 
-moz-transition: opacity 0.25s ease-in-out; 
-o-transition: opacity 0.25s ease-in-out; 
-ms-transition: opacity 0.25s ease-in-out; 
transition: opacity 0.25s ease-in-out; 
position: absolute; 
opacity: 1; 
cursor: pointer; 
} 

.img-fade:hover{ 
opacity: 0.4; 
} 

#li1 img{ 
content:url(../img/dd/private-bank.jpg); 
width: 232px; 
clip: rect(0px, 232px, 80px, 0px); 
}

screenshot