Dropdown behaves differently depending on the html page - html

Question

I've got a dropdown in a navbar. The navbar is the same in all the HTML files with this items:
Home
Services
About
Contact
When hovering the services item the dropdown comes down showing "Designs" and "Shop" items. No problem yet. The thing is that when going to "designs.html" file after clicking "Designs" in the dropdown, there is an option of "Read more" in a button which leads you to another html file called "interior-designs.html". This last file also has the same navbar (created by copy-paste from the others), but the dropdown behaves differenly.
In the navbar of "interior-designs.html" I cannot click in the elements of the dropdown, because when I move the mouse from the main navbar to the dropdown it hides. That is to say, when I stop hovering the "Services" item in the navbar and start hovering the dropdown, it hides.
I don't know what's happening, all the code is the same for all the HTML files, so I don't understand why is this happening.
It is also behaving differently in the "interior-designs.html" file for the mobile menu. In here the menu shows "Designs" and "Shop" when clicking "Services", but then if I click there nothing happens. As well as nothing happens when clicking "About" and "Contact". "Home" is the only one that is working in the mobile menu of "interior-desings.html". All the in other HTML files the menu is working perfectly in both mobile and computer.
I hope someone can help me!
$('#services-item').on('click', function() {
$('#sub-list').toggle();
});
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
font-size: 15px;
}
.dropdown-content a:hover {
background-color: #a55c5c;
border-radius: 0;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
color: #fff;
background-color: #a55c5c;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="header_section">
<div class="header_main">
<div class="mobile_menu">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="index.html">Home</a>
</li>
<li id="services-item" class="nav-item">
<a class="nav-link" href="#">Services</a>
<ul id="sub-list" style="display: none;">
<li class="subnav-item"><a class="subnav-link" href="designs.html">Shop</a></li>
<li class="subnav-item"><a class="subnav-link" href="shop.html">Shop</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="index.html#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link " href="index.html#contact">Contact</a>
</li>
</ul>
</div>
</nav>
</div>
<div class="container-fluid">
<div class="logo-pag">
<img src="images/logo.png">
</div>
<div class="menu_main">
<ul>
<li>Home</li>
<li>
<div class="dropdown">
<a class="dropbtn" href="index.html#services">Services</a>
<div class="dropdown-content">
Designs
Shop pelbikoa
</div>
</div>
</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
</div>