そこで、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 ▼" />
<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 ホバー ドロップダウン プラグインを使用してみましたが、同じ問題が発生しました。