I tried to do a dropdown menu using Superfish. However, the drop down doesn't seems to be working. All scrips and link are directed to the js/css file. I have also done the script that needed to ready the function. But it doesn't seems to work. note I'm doing this on static html.
I have tried to change the source file name to check whether is it source issue, but doesn't seems to be, as I still can take in my main.css but not the superfish.css or .js file. I have also did comparison with some other website that uses superfish, seems to be the same.
<link href="http://localhost:8383/1004Project/public_html/css/superfish.css" rel="stylesheet" media="screen">
<script src="http://localhost:8383/1004Project/public_html/js/jquery.js"></script>
<script src="http://localhost:8383/1004Project/public_html/js/superfish.js"></script>
<script src="http://localhost:8383/1004Project/public_html/js/hoverIntent.js"></script>
<script>
jQuery(document).ready(function() {
jQuery('ul.sf-menu').superfish();
});
</script>
<nav id="primary-menu">
<ul class="sf-js-enabled">
<li><a href="ProjectStories.html"><div>Project's Stories</div></a></li>
<li><a href="Menus.html"><div>Menus</div></a></li>
<li><a href="Promotions.html"><div>Promotions</div></a></li>
<li><a href="CelebrationTips.html"><div>Celebration Tips</div></a></li>
<li class="sub-menu">
<a href="#" class="sf-with-ul">
<div>Help</div>
</a>
<ul style="display: none;">
<li>
<a href="FAQ.html"><div>FAQ</div></a>
</li>
<li>
<a href="Feedback.html"><div>Feedback</div></a>
</li>
<li>
<a href="ContactUs.html"><div>Contact Us</div></a>
</li>
</ul>
</li>
</ul>
</nav>
I'm hoping the dropdown menu to work. It doesn't even have the dropdown.
Here is an working sample example Your code need some css changes too so i referred some basic example from here Also make sure all the scripts are loading properly and you are not having any errors in browser console too regarding the scripts.
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/superfish/1.7.10/css/superfish.min.css" media="screen">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/superfish/1.7.10/js/superfish.min.js">
</script>
</head>
<div id="sample1" class="clearfix">
<ul id="sample-menu-1" class="sf-menu sf-js-enabled sf-arrows" style="touch-action: pan-y;">
<li class="current"><a href="#a" class="sf-with-ul">menu item</a>
<ul style="display: none;">
<li><a href="#aa">menu item</a></li>
<li class="current"><a href="#ab" class="sf-with-ul">menu item</a>
<ul style="display: none;">
<li class="current"><a href="#">menu item</a></li>
<li><a href="#aba">menu item</a></li>
<li><a href="#abb">menu item</a></li>
<li><a href="#abc">menu item</a></li>
<li><a href="#abd">menu item</a></li>
</ul>
</li>
<li><a href="#" class="sf-with-ul">menu item</a>
<ul style="display: none;">
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
</ul>
</li>
<li><a href="#" class="sf-with-ul">menu item</a>
<ul style="display: none;">
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">menu item</a></li>
<li><a href="#" class="sf-with-ul">menu item</a>
<ul style="display: none;">
<li><a href="#" class="sf-with-ul">menu item</a>
<ul style="display: none;">
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
</ul>
</li>
<li><a href="#" class="sf-with-ul">menu item</a>
<ul style="display: none;">
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
</ul>
</li>
<li><a href="#" class="sf-with-ul">menu item</a>
<ul style="display: none;">
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
</ul>
</li>
<li><a href="#" class="sf-with-ul">menu item</a>
<ul style="display: none;">
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
</ul>
</li>
<li><a href="#" class="sf-with-ul">menu item</a>
<ul style="display: none;">
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">menu item</a></li>
</ul>
</div>
<script>
jQuery(document).ready(function () {
$('ul.sf-menu').superfish();
});
</script>