I am using Twenty seventeen to build my own design dropdown menu not working for me

when I hover on the parent no thing shown

here is mu own HTML output

<div class="headermenu">
<div class="headermenu_wrap">
        <div class="menu-primary1-container"><ul id="menu-primary1" class="nav-menu"><li id="menu-item-115" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-115"><a href="http://127.0.0.1/sh/1/?page_id=113">search1</a></li>
<li id="menu-item-121" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-121"><a href="#">sub<svg class="icon icon-angle-down" aria-hidden="true" role="img"> <use href="#icon-angle-down" xlink:href="#icon-angle-down"></use> </svg></a>
<ul  class="sub-menu">
<li id="menu-item-116" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-116"><a href="http://127.0.0.1/sh/1/?page_id=77">search<svg class="icon icon-angle-down" aria-hidden="true" role="img"> <use href="#icon-angle-down" xlink:href="#icon-angle-down"></use> </svg></a>
    <ul  class="sub-menu">
        <li id="menu-item-117" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-117"><a href="http://127.0.0.1/sh/1/?page_id=20">random<svg class="icon icon-angle-down" aria-hidden="true" role="img"> <use href="#icon-angle-down" xlink:href="#icon-angle-down"></use> </svg></a>
        <ul  class="sub-menu">
            <li id="menu-item-118" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-118"><a href="http://127.0.0.1/sh/1/?page_id=29">random1<svg class="icon icon-angle-down" aria-hidden="true" role="img"> <use href="#icon-angle-down" xlink:href="#icon-angle-down"></use> </svg></a>
            <ul  class="sub-menu">
                <li id="menu-item-119" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-119"><a href="http://127.0.0.1/sh/1/?page_id=33">random3</a></li>
        </ul>
</li>
<li id="menu-item-120" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-120"><a href="http://127.0.0.1/sh/1/?page_id=113">search1</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul></div>         
<div class="social_header-inner">
<ul class="social_header-ul">
<li><a href="http://127.0.0.1/sh/1/&feed=rss2" class="social_links_a" target="_blank">
<i class="fa fa-rss-square"></i></a></li>
        <li><a href="#" class="social_links_a" target="_blank">
<i class="fa fa-facebook-square"></i></a></li>
        <li><a href="##" class="social_links_a" target="_blank">
<i class="fa fa-twitter-square"></i></a></li>
        <li><a href="###" class="social_links_a" target="_blank">
<i class="fa fa-youtube-square"></i></a></li>
        <li><a href="####" class="social_links_a" target="_blank">
<i class="fa fa-google-plus-square"></i></a></li>
        <li><a href="#####" class="social_links_a" target="_blank">
<i class="fa fa-instagram"></i></a></li>
        <li><a href="######" class="social_links_a" target="_blank">
<i class="fa fa-linkedin-square"></i></a></li>
        <li><a href="#######" class="social_links_a" target="_blank">
<i class="fa fa-flickr"></i></a></li>
    </ul>
</div>
</div>

</div></div>

and here is my loaded scripts from the front end view source
<script type='text/javascript' src='http://127.0.0.1/sh/1/wp-includes/js/jquery/jquery.js?ver=1.12.4'></script>
<script type='text/javascript' src='http://127.0.0.1/sh/1/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.4.1'></script>

new step , I discovered that global.JS and Navigation.JS not called , so i edited functions.php both called now