How can I fix custom Kendo UI theme CSS which causes an IE 8 glitch?

Question

Trying: Kendo UI Mendu demo with custom theme (Kendo UI Custom Themes or modified theme CSS)

I've customized the Bootstrap theme, and encountered a glitch in IE 8 when mousing over a menu item, only when using the custom theme CSS.

Customized Bootstrap theme example: http://jsbin.com/ovufef/1/edit (Glitch in IE 8)

Original Bootstrap theme example: http://jsbin.com/urinev/1/edit (works as expected)

Kendo UI Menu:

<ul id="menu">
    <li>
        Stores
        <ul>
            <li>
                <div style="padding: 50px;">
                    <h2>Around the Globe</h2>
                </div>
            </li>
        </ul>
    </li>
</ul>
<script>
$(document).ready(function() {
    $("#menu").kendoMenu();
});
</script>

View the CSS in the jsBins, they are too long to include here since they are Kendo themes.

Basically the glitch is when you mouse over an item, it does not drop the sub item down immediately, you must move your mouse over where the sub item would display, and wiggle around until it weirdly and magically appears.

I'm unsure what is causing the IE8 glitch in my custom theme. The styles are so simliar, I can't figure out what's causing it. I have done a file diff on the CSS, and seems to me (after looking at the diff a few times) to be only background color, gradient, border color, etc changes.

If anyone could help me fix the custom CSS, it would be much appreciated.

---

Notes:

• Bootstrap is just theme name, nothing to do with Twitter Bootstrap... just looks similar.
• I hate IE with a passion, this was not my choice (and for the most part Kendo works fine in IE)
• jsBin used because IE8 does not work in jsFiddle
• Update: viewing jSBin in new window, glitch is not produced but does reproduce in web app with custom theme used. More research needed, will update or answer soon

Answer 1

Something happens in that jsBin iframe - if you open the bin in a new window - it works.