hover effect on navbar toggle dropdown not orking on dynamic data

Question

I created a dynamic data for my navbar dropdown, but the problem I encounter is when it is on static mode the dropdown hover works.

However, when i load the data from my database and display it on my page, hover effect does not work.

Here is my script:

               $.ajax({
                    url:'/api/navbarToggleDropdownMenu/getall',
                    type:'GET',
                    dataType:'JSON',
                    // async:false,
                    success:function (res) {

                        for(i in res){
                            myKey = i;
                            myVal = res[i]
                            for(o in myVal){
                               nKey = o 
                               nVal = myVal[o]

                                if(nVal.moduleId != undefined || nVal.moduleId != null){

                                    $('[data-id="'+myKey+'"]').replaceWith('<li class="dropdown megamenu-fw" >'+
                                                                                    '<a href="javascript:void(0)" class="dropdown-toggle">'+nVal.moduleName+'</a>'+
                                                                                    '<ul class="dropdown-menu megamenu-content" style="height:100%;" role="menu">'+
                                                                                        '<li>'+
                                                                                            '<div class="row">'+
                                                                                                '<div class="col-menu col-md-3">'+
                                                                                                    '<ul class="menu-col">'+
                                                                                                        '<li><a href="about">'+nVal.moduleName+'</a></li>'+
                                                                                                        '<li><a href="mvco">'+nVal.moduleName+'</a></li>'+
                                                                                                    '</ul>'+
                                                                                                '</div><!-- end col-3 -->'+

                                                                                            '</div><!-- end row -->'+
                                                                                        '</li>'+
                                                                                    '</ul>'+
                                                                                '</li>');
                                }
                            }
                        }

                    }
                })

but when I resize my browser after AJAX request hover effect works.

What I want to do is to make hover effect work after my AJAX request loads.