Navigation Dropdown not working in IE

The navigation bar "Horizontal with dropdown menus" template works in Chrome but not IE. I can still click on it in IE but the dropdown doesn't come down when I hover over it in IE. It works perfectly in Chrome. Here is the code. Thank you for any assistance!

<%@ Control Language="C#" %>
<%@ Import Namespace="Telerik.Sitefinity.Web.UI.NavigationControls.Extensions.LightNavigationControlTemplate" %>
<%@ Import Namespace="Telerik.Sitefinity.Web.UI.NavigationControls" %>

<%@ Register Assembly="Telerik.Sitefinity" TagPrefix="navigation" Namespace="Telerik.Sitefinity.Web.UI.NavigationControls" %>
<%@ Register Assembly="Telerik.Sitefinity" TagPrefix="sf" Namespace="Telerik.Sitefinity.Web.UI" %>

<sf:ResourceLinks id="resLinks" runat="server" UseEmbeddedThemes="true" Theme="Basic">
    <sf:ResourceFile Name="Telerik.Sitefinity.Resources.Themes.Basic.Styles.nav.widget.css" Static="true" />
    <sf:ResourceFile Name="Telerik.Sitefinity.Resources.Scripts.Kendo.styles.kendo_common_min.css" Static="true" />
    <sf:ResourceFile JavaScriptLibrary="JQuery" />
    <sf:ResourceFile JavaScriptLibrary="KendoWeb" />
</sf:ResourceLinks>

<navigation:SitefinitySiteMapDataSource runat="server" ID="dataSource" />

<div class="sfNavWrp sfNavHorizontalDropDownWrp <%= this.GetCssClass() %>">
     <%-- responsive design section - renders templates for the responsive design --%>
    <navigation:NavTransformationTemplate runat="server" TransformationName="ToToggleMenu" TemplateName="ToggleMenu" />
    <navigation:NavTransformationTemplate runat="server" TransformationName="ToDropDown" TemplateName="Dropdown" />
     <%-- end of the responsive design section --%>

    <ul runat="server" id="navigationUl" class="sfNavHorizontalDropDown sfNavList">
        <navigation:NavigationContainer runat="server" DataSourceID="dataSource">
            <Templates>
                <navigation:NavigationTemplate>
                    <Template>
                        <li>
                            <a runat="server" href='<%# Eval("Url") %>' target='<%# NavigationUtilities.GetLinkTarget(Container.DataItem) %>'><%# Eval("Title") %></a>
                            <ul runat="server" id="childNodesContainer"></ul>
                        </li>
                    </Template>
                    <SelectedTemplate>
                        <li>
                            <a runat="server" href='<%# Eval("Url") %>' class="sfSel" target='<%# NavigationUtilities.GetLinkTarget(Container.DataItem) %>'><%# Eval("Title") %></a>
                            <ul runat="server" id="childNodesContainer"></ul>
                        </li>
                    </SelectedTemplate>
                </navigation:NavigationTemplate>
            </Templates>
        </navigation:NavigationContainer>
    </ul>
</div>

<%-- link to Kendo documentation demos.kendoui.com/.../index.html --%>
<script type="text/javascript">
    (function ($)
        var whetherToOpenOnClick = false;

        var kendoMenu = $('.sfNavHorizontalDropDown').not('.k-menu').kendoMenu(
            animation: false,
            openOnClick: whetherToOpenOnClick
        ).data('kendoMenu');

        if (whetherToOpenOnClick)
            jQuery(kendoMenu.element).find("li:has(ul) > a").attr("href", "javascript:void(0)");
       
    )(jQuery);
</script>

Hi Ben,

I have recorded this short video for you showing how you can do it in Sitefinity.  Notice that by default the child items in the menu will appear when click, however setting the "whetherToOpenOnClick" to false in the Navigation widget template will show them  when OnMouseOver. This will also work for IE as shown here.

Best Regards,
Junior Dominguez
Telerik