html - Inzu - IE 9 无法识别菜单项的全高

Question

Inzu 网站的菜单系统在 IE 9 中不工作。在每个 li 元素之间，在 CSS 中生成一个“分支”图形，用一个小连接器将 li 元素分开。

在包括 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;
}

连接器是用最后一个 block 做的，这都可以在http://www.bexleylscb.org.uk看到

Answer 1

通过使用透明 PNG 设置列表元素的背景，问题就消失了。