Html IE中的按钮工作不正常？

所以我只用CSS和HTML创建了一个“下拉按钮”，它在Chrome和FireFox中运行得非常好。然而，在IE中，“新发票”按钮在悬停时不起任何作用，并且位置怪异。知道为什么会这样吗

以下是Chrome中的屏幕截图：
在IE中：

这是我的CSS：

<style type="text/css">
    .dropdownbutton ul ul { display: none; width:135px; }
    .dropdownbutton ul li:hover ul { display: block; }
    .dropdownbutton ul { list-style: none; position: relative; display: inline-table; }
    .dropdownbutton ul li:hover a { color: #000000; font-weight:800; }
    .dropdownbutton ul li a { display: block; text-decoration: none; }
    .dropdownbutton ul ul { background: #9799cc; padding: 0; position: absolute; top: 100%; }
    .dropdownbutton ul ul li { float: none; border-top: 1px solid #4b545f; position: relative; }
    .dropdownbutton ul ul li a { padding: 5px 5px; }
    .dropdownbutton ul ul li a:hover { background: #6d70aa; }
</style>

.dropdownbutton ul ul{显示：无；宽度：135px；}
.dropdownbutton ul li:悬停ul{display:block；}
.dropdownbutton ul{列表样式：无；位置：相对；显示：内联表；}
.dropdownbutton ul li:将鼠标悬停在{color:#000000；字体重量：800；}
.dropdownbutton ul li a{显示：块；文本装饰：无；}
.dropdownbutton ul ul{背景：#9799cc；填充：0；位置：绝对；顶部：100%；}
.dropdownbutton ul ul li{浮动：无；边框顶部：1px实心#4b545f；位置：相对；}
.dropdownbutton ul ul li a{填充：5px 5px；}
.dropdownbutton ul ul li a:悬停{背景：#6d70aa；}

和我的HTML：

<div class="dropdownbutton">
  <ul>
    <li>
      <input type="button" class="innerButton" value="New Invoice &#x25BC;" />
      <ul>
        <li><a href="#" onclick="DoNewInvoiceClick('1');">New General...</a></li>
        <li><a href="#" onclick="DoNewInvoiceClick('2');">New Percent...</a></li>
        <li><a href="#" onclick="DoNewInvoiceClick('4');">New Retention Claim...</a></li>
      </ul>
    </li>
  </ul>

---

另外，我也尝试过使用引导悬停下拉插件，我也遇到了同样的问题。

将

垂直对齐：top

添加到列表项。

检查您是否处于兼容模式。IE10应该正确显示这一点。尝试将此项置于网站的

部分以禁用兼容模式：

<meta http-equiv="X-UA-Compatible" content="IE=edge">

您使用过CSS重置吗？您没有使用JSFIDLE吗。您测试过哪个IE版本？你有没有检查过你的页面是处于怪癖模式还是兼容模式？另外，按钮本身似乎工作正常，问题在于他的对齐。所以把按钮周围的标记放进去。CSS重置并不能修复它。我使用的是IE10。这似乎无法修复它。如果您给我们一个指向实际页面的链接，则调试会更容易。抱歉，这是一个本地网站，因此它仅在我的计算机上运行