Recently, I encountered an issue with a "dropdown button" that I created using only CSS and HTML. Surprisingly, it works flawlessly in Chrome and FireFox, but seems to have some glitches when tested on Internet Explorer (IE). The "New Invoice" button fails to respond on hover and is oddly positioned. Can anyone shed light on the possible reasons behind this peculiar behavior?
To provide visual evidence, here is a screenshot of how the dropdown button appears in Chrome: https://i.stack.imgur.com/yPgZa.jpg. This is how it looks in IE: https://i.stack.imgur.com/yPgZa.jpg#1
The following CSS code demonstrates the styling for the dropdown button:
<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>
Here is the corresponding HTML code:
<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>
In an attempt to resolve this issue, I experimented with using the Bootstrap hover dropdown plugin. Unfortunately, it yielded no positive outcomes and the problem persisted.