html - IE でボタンが正しく機能しない場合

Question

そこで、CSS と HTML だけを使用して「ドロップダウン ボタン」を作成しました。これは、Chrome と FireFox で美しく機能します。ただし、IE では、「新しい請求書」ボタンはホバー時に何もせず、変な位置に配置されます。なぜこれが起こっているのですか？

これは Chrome でのスクリーンショットです: http://imgur.com/ZqjS1i4,cuLuNtj
そして IE で: http://imgur.com/ZqjS1i4,cuLuNtj#1

これが私の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>

そして私の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>

また、Bootstrap ホバー ドロップダウン プラグインを使用してみましたが、同じ問題が発生しました。

Answer 1

vertical-align:topリスト項目に追加します。