사각형이 아닌 사각형 드롭 다운 메뉴

Question

다음과 같은 사각형이 아닌 드롭 다운 메뉴를 구현해야합니다.

http://postimg.org/image/fmzro5rfl/

이가 IE8와 함께 작동하도록해야합니다 (그림 참조). 마우스 오버시 사다리꼴 제품 아이콘 div가 강조 표시됩니다.

이것을 구현하려면 이미지 맵, CSS 스프라이트 또는 CSS 변환을 사용해야합니까?

• 필요하다면 내가 여분의 도우미 라이브러리를 그냥 감사

IE8/9을 처리하는 데 신경 쓰지 않는다 PNG를 사용할 수 있습니다

! 이 같은

Answer 1

보십시오 뭔가 - http://jsfiddle.net/ad9Bj/

HTML :

<div> 
    <ul> 
     <li>item 1</li> 
     <li>item 2</li> 
     <li>item 3</li> 
    </ul> 
</div> 

CSS :

div { 
    background: orange; 
    overflow: hidden; 
} 
ul li { 
    float: left; 
    list-style: none; 
    margin-right: 20px; 
    padding-left:40px; 
    padding-right:40px; 
    padding-top:5px; 
    padding-bottom:5px; 
    color: #fff; 
} 
ul li:hover { 
    background: url('http://i.imgur.com/ZV01sGZ.png') no-repeat; 
}