On Hover Dropdown Navigation with functioning parent link v9

I'm trying to make my horizontal navigation display the sub navigation on hover but still allow the parent navigation to link to it's respective page. I have some jquery that switches the onclick event into a hover event but the link is missing from the parent item.

Any help would be appreciated.

My script

function sethoverevents()

        $('ul.nav li.dropdown').hover(function ()
            // you could also use this condition: $( window ).width() >= 768
            if ($('.navbar-toggle').css('display') === 'none'
                && false === ('ontouchstart' in document))

                $('.dropdown-toggle', this).trigger('click');
           
        , function ()
            if ($('.navbar-toggle').css('display') === 'none'
                && false === ('ontouchstart' in document))

                $('.dropdown-toggle', this).trigger('click');
           
        );

   

A solution I found is changing the root level rendering from :

@*Here is specified the rendering for all child levels*@
@helper RenderSubLevelsRecursive(NodeViewModel node)

    foreach (var childNode in node.ChildNodes)
   
        if(childNode.ChildNodes.Count > 0)
       
             <li class="dropdown-submenu">
                <a href="@childNode.Url" target="@childNode.LinkTarget">@childNode.Title
                    <span class="right-caret"></span>
                </a>
                <ul class="dropdown-menu">
                    @RenderSubLevelsRecursive(childNode)
                </ul>
            </li>
       
        else
       
            <li class="@GetClass(childNode)">
                <a href="@childNode.Url" target="@childNode.LinkTarget">@childNode.Title</a>
            </li>
       
   

to

@*Here is specified the rendering for all child levels*@
@helper RenderSubLevelsRecursive(NodeViewModel node)

    foreach (var childNode in node.ChildNodes)
   
        if(childNode.ChildNodes.Count > 0)
       
             <li class="dropdown-submenu">
                <a href="@childNode.Url" target="@childNode.LinkTarget">@childNode.Title
                    <span class="right-caret"></span>
                </a>
                <ul class="dropdown-menu">
                    @RenderSubLevelsRecursive(childNode)
                </ul>
            </li>
       
        else
       
            <li class="@GetClass(childNode)">
                <a href="@childNode.Url" target="@childNode.LinkTarget">@childNode.Title</a>
            </li>
       
   

Then wrote some javascript to handle the display of the submenu item.

Hello,

It seems like you have been able to find a solution to your problem, however the code example you have provided in both cases is the same. Can you please share the updated code, that solves you problem, with the community?

Regards,
Velizar Bishurov
Telerik