JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>Minimizing JS | Sales CRM</title>
    </head>
    <body>
        <div id="tbar-cnt">
            <div id="tbar">
                <span id="tbar-1">
                    <div id="tbaritem-timer-menu" class="menu" style="display:none">
                        <h4>Change Time Format</h4>
                        <ul>
                            <li id="menuitem-hhmmss">Hours, Minutes &amp; Seconds</li>
                            <li id="menuitem-ss">Seconds Only</li>
                        </ul>
                    </div>
                    <div id="tbaritem-timer" class="tbaritem">Menu</div>
                </span>
            </div>
        </div>
        <p>
            Try to access the menu and hover over a menu item.  In IE8, the menu disappears 650ms after leaving hovering off the menu button, even though you are still hovered over the menu itself.  In Chrome, that problem does not occur.  The problem in IE8 is that the timer responsible for hiding the menu should be cleared when we hover onto the menu, but it's not, because the timer ID cannot be retrieved using jQuery.data() (returns undefined).
        </p>
        <div id="messages">
            <h2>Messages</h2>
        </div>
    </body>
</html>

CSS

body {
    font-family: 'Lucida Grande', Helvetica, Arial, Verdana, sans-serif;
    font-size: 11px;
    margin: 0;
    overflow: hidden;
}
#tbar-cnt {
    background-color: #fff;
}
#tbar {
    border-bottom: 1px solid #ccc;
    font-size: 11px;
    height: 33px;
    line-height: 33px;
    position: relative;
}
.tbaritem {
    border-top: 3px solid #fff;
    border-left: 1px solid #fff;
    border-right: 1px solid #fff;
    display: inline-block;
    height: 30px;
    line-height: 27px;
    padding-left: 15px;
    padding-right: 15px;
}
.tbaritem:hover {
    background-color: #eee;
    border-top: 3px solid #bbb;
    border-left: 1px solid #bbb;
    border-right: 1px solid #bbb;
    color: #0085cc;
    cursor: pointer;
    height: 30px;
    line-height: 27px;
}
.menu {
    background-color: #f3f3f3;
    border: 1px solid #bbb;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    box-shadow: 2px 2px 5px -2px #999;
    position: absolute;
    top: 33px;
    width: 250px;
    z-index: 1;
}
.menu h4 {
    font-size: 16px;
    font-weight: bold;
    margin: 0;
    padding: 10px 30px 0 30px;
}
.menu ul {
    padding: 0;
    font-size: 10px;
    list-style: none;
    line-height: 18px;
    margin: 0 0 10px 0;
}
.menu li {
    padding: 0 30px 0 45px;
}
.menu li:hover {
    background-color: #d6e5f2;
    color: #0085cc;
    cursor: pointer;
}
#messages {
    border: 1px solid #bbb;
    margin: 100px;
    padding: 10px;
}
#messages h2 {
    font-size: 14px;
    font-weight: bold;
}
.message {
    border-top: 1px dotted #bbb;
    padding: 5px;
}
p {
    padding: 15px;
}

JavaScript

// Adds a message to the UI so you can see what's going on.
function addMessage(msg) {
    $('<div class="message">' + msg + '</div>').appendTo('#messages');
}

// Shows the menu and clears any pending timers that would automatically hide it.
function showMenu() {
    var id = this.id;
    if (id.substr(-5) != '-menu')
        id += '-menu';
    var $menu = $('#' + id);
    
    // Retrieve the timer ID from the menu element, so we can cancel it.
    // This often returns undefined in IE8!
    clearTimeout($menu.data('hide'));
    
    $menu.show();
    
    addMessage("Showing menu "+id+" and clearing timer: " + $menu.data('hide'));
}

// Sets a timer to hide the menu after 650ms.  The timer can be cleared by
// showMenu() above, cancelling the hiding of the menu.
function hideMenu() {
    var id = this.id;
    if (id.length >= 5 && id.slice(id.length - 5, id.length) != '-menu')
        id += '-menu';
    var $menu = $('#' + id);
    
    // Associate the timer ID to the menu element, so it can be cancelled later.
    $menu.data('hide', setTimeout(function() {
        $menu.hide();
    }, 650));
    
    addMessage("Hiding menu "+id+" and setting timer: " + $menu.data('hide'));
}

$('#tbaritem-timer').hover(showMenu, hideMenu);
$('#tbaritem-timer-menu').hover(showMenu, hideMenu);