Inzu - IE 9 메뉴 항목 전체 높이를 다시 표시하지 않음

Question

Inzu 사이트의 메뉴 시스템이 IE 9에서 작동하지 않습니다. 각 li 요소 사이에 li 요소와 틈새를 구분하는 "branch"그래픽이 생성됩니다 작은 커넥터.

IE 11을 포함한 다른 모든 브라우저에서 메뉴는 정상적으로 작동하지만 IE 9에서는 마우스가 틈을 넘으면 메뉴가 사라지고 커넥터 그래픽 위로 마우스를 움직이면 정상입니다.

이

는 HTML입니다 :

<ul class="nav"> 
<li class="section_1"><a href='about.php?section=section_1&id=About'>About the BSCB</a> 
<ul class="submenu"> 
<li><a href='page.php?section=section_1&id=266'>Structure and Governance</a></li> 
<li><a href='page.php?section=section_1&id=265'>BSCB Membership</a></li> 
</ul> 
</li> 
</ul> 

그리고이 커넥터는 마지막 블록으로 만들어지는 CSS

.section_1{ 
    background-color: #a30046; 
} 

.nav { 
    height: 47px; 
    font-family: "Arial Rounded MT Bold", Arial, Helvetica, sans-serif; 
} 
.nav li { 
    position: relative; 
    float: left; 
    margin: 0 0 0 6px; 
    width: 115px; 
    min-height: 39px; 
} 
.nav li:first-child { 
    margin-left: 0; 
    width: 117px; 
} 
.nav li a { 
    display: block; 
    width: 100%; 
    padding: 4px 6px; 
    color: #fff; 
    font-size: 1.2em; 
    line-height: 1.2em; 
    text-decoration: none; 
} 
.nav li .submenu { 
    display: none; 
    position: absolute; 
    top: 39px; 
} 
.nav li .submenu li { 
    width: 115px !important; 
    margin: 0; 
    padding: 6px 0 0 0; 
    min-height: 45px; 
} 
.nav li .submenu li a { 
    min-height: 39px; 
} 
.nav li .submenu li a:before { 
    position: absolute; 
    top: 0; 
    left: 50%; 
    margin-left: -3px; 
    content: ""; 
    display: block; 
    width: 6px; 
    height: 6px; 
    background-color: inherit; 
} 

이다,이 모두 설정하여 http://www.bexleylscb.org.uk

Answer 1

에서 볼 수있다 투명 PNG가있는 목록 요소의 배경이 사라졌습니다.