垂直CSS/HTML菜单-IE7中的文本跳转

我在IE7中遇到HTML/CSS垂直菜单的问题。在IE7中，当我悬停时，文本会发生变化，并且当悬停变为活动/非活动时，文本看起来真的很跳跃

我的HTML是

<table width="100%" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td align="center"><h5>&nbsp;</h5></td>
  </tr>
  <tr>
    <td height="137" align="center"><blockquote>
      <div id="vmenu">
        <ul>
          <li>
            <h5 class="style5">Intermittent Fasting Diet Articles - Navigation</h5>
          </li>
          <li><a href="caloriesinblackberries.html">Calories in Blackberries</a></li>
        </ul>
      </div>
    </blockquote></td>
  </tr>
</table>

---

我很确定这是由于IE7，因为Opera和Firefox中的菜单看起来不错。

我猜这与基于伪类的填充的多个定义有关。由于长方体模型，当您悬停时，它会更改长方体，四处移动文本，并可能将光标移动到伪类不再适用的区域

尝试删除

填充

规则并重新测试。

以下是清理后的CSS：

.offscreen {
position: absolute;
top: -30em;
left: -300em;
}
div#vmenu {
margin: 0;
padding: .25em 0em .25em 0em;
border: solid 0px #002277;
background: #ffffff;
width: 13.5em;
}
div#vmenu ul {
margin: 0;
padding: 0;
list-style: none;
}
div#vmenu ul li {
margin: 0;
padding: 0;
list-style: none;
}
div#vmenu ul a:link {
margin: 0;
padding: .2em 0em .2em .4em;
text-decoration: none;
font-weight: bold;
font-size: medium;
background-color: #FFFFFF;
color: #000033;
display: block;
}
div#vmenu ul a:active {
margin: 0;
padding: .25em .5em .25em .5em;
text-decoration: none;
font-weight: bold;
font-size: medium;
background: #ffffff;
color: #ffffff;
display: block;
}
div#vmenu ul a:visited {
margin: 0;
padding:  .25em .5em .25em .5em;
text-decoration: none;
font-weight: bold;
font-size: medium;
background: #ffffff;
color: #666666;
display: block;
}
div#vmenu ul li a:hover {
margin: 0;
padding: .2em 0em .2em .4em;
text-decoration: none;
font-weight: bold;
font-size: medium;
background-color: #ffffff;
color: #ff6600;
display: block;
}