jquery - Can't get dropotron script to work properly [HTML/CSS/JavaScript]

Question

I asked a previous question about creating a dropdown menu on my webpage similar to a template. I figured out that the template was using dropotron to create this menu. I downloaded dropotron and attempted to follow the instructions it provided.

Here's my website, and here's the example that shows a working dropotron script.

Here's a codepen link to the HTML, CSS, and JavaScript: codepen.io/anon/pen/EPaYNz

What's odd is that it works in codepen result, but I'm not sure why it's buggy on my site. I copied the HTML, CSS, and JavaScript files exactly.

Any thoughts?

Thanks!

EDIT: another misc bug I found on the codepen result was when I hover over "Biography" in the submenu, "Who I Am" disappears. Any way to fix this, too?

Answer 1

For formatting purposes I'm putting this as an answer. Your scripts should look like this at the bottom and there should be no scripts in the head:

<!-- Scripts -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/jquery.poptrox.min.js"></script>
<script src="assets/js/jquery.scrolly.min.js"></script>
<script src="assets/js/jquery.scrollex.min.js"></script>
<script src="assets/js/skel.min.js"></script>
<script src="assets/js/util.js"></script>
<!--[if lte IE 8]><script src="assets/js/ie/respond.min.js"></script><![endif]-->
<script src="assets/js/jquery.dropotron.js"></script>
<script>
  $(function() {

    // Note: make sure you call dropotron on the top level <ul>
    $('#nav > ul').dropotron({ 
      offsetY: -10 // Nudge up submenus by 10px to account for padding
    });

  });
</script>
<script src="assets/js/main.js"></script>

By the way, your <--[if lte blah] didn't have the closing angle bracket > all the way at the end