I'm trying to import `header.html` for avoiding file duplication. But in this situation, I can't use PHP.
This is the head section of `index.html` file,

```
<script
        src="https://code.jquery.com/jquery-3.3.1.js"
        integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
        crossorigin="anonymous">
</script>
<script>
    $(function(){
        $("#header").load("header.html");
        $("#footer").load("footer.html");
    });
</script>

```

The body section I have called my `header.html` as follows,

```
<body>
  <!-- include Header -->
  <div id="header"></div>
  <!-- end include header -->
</body>

```

The header is including fine but after the header included the dropdown lists become unclickable. [![In this image I cant click about us dropdown list](https://i.stack.imgur.com/laO3R.jpg)](https://i.stack.imgur.com/laO3R.jpg)

When I go to inspect elements there are following errors,
[![enter image description here](https://i.stack.imgur.com/FYQI8.jpg)](https://i.stack.imgur.com/FYQI8.jpg)