Simple jQuery and CSS Navigation Randomly Not Working Correctly on Refresh... all browsers

Okay, this seems to be the case in all browsers and resolutions. I'm brand new to coding, so I'm fairly sure it's a simple error I'm missing. I've asked a group of friends, and it seems to be the same for everyone. The navigation hover only works some of the time on the main coded layout (not fully coded yet). I pulled the navigation out by itself and it seems to work correctly 100% of the time.

You can view how it should work here: http://dperolio.com/newnav/css/

Here is where the problem is: http://dperolio.com/tealtop2

It may work for you initially, or it may not. If you spam refresh (Ctrl+R) it will sometimes work. When it doesn't work, it seems it just sits in the hover state no matter what (bold white links).

I appreciate any insight you can offer; again I'm fairly sure I just made some stupid mistake and hopefull开发者_运维问答y someone more experienced can spot it and point it out for me? Thanks!

---

I knew it was something stupid... It was because I had the external CSS listed after calling the jQuery instead of before it.

---

Here is a quick demo I made for you:

$(document).ready(function() {

  $("#topnav li").prepend("<span></span>"); //Throws an empty span tag right before the a tag

  $("#topnav li").each(function() { //For each list item...
    var linkText = $(this).find("a").html(); //Find the text inside of the a tag
    $(this).find("span").show().html(linkText); //Add the text in the span tag
  });

  $("#topnav li").hover(function() { //On hover...
    $(this).find("span").stop().animate({
      marginTop: "-40" //Find the span tag and move it up 40 pixels
    }, 250);
  }, function() { //On hover out...
    $(this).find("span").stop().animate({
      marginTop: "0" //Move the span back to its original state (0px)
    }, 250);
  });

});

ul#topnav {
  margin: 0;
  padding: 0;
  list-style: none;
  float: left;
  font-size: 1.1em;
}

ul#topnav li {
  margin: 0;
  padding: 0;
  overflow: hidden;
  /*--Important - Masking out the hover state by default--*/
  float: left;
  height: 40px;
}

ul#topnav a,
ul#topnav span {
  /*--The <a> and <span> share the same properties since the <span>  will be a duplicate of the <a> tag--*/
  padding: 10px 20px;
  float: left;
  text-decoration: none;
  color: #000;
  background: url(a_bg.gif) repeat-x;
  text-transform: uppercase;
  clear: both;
  width: 100%;
  height: 20px;
  line-height: 20px;
  /*--Vertical alignment of text--*/
}

ul#topnav a {
  /*--This is basically the hover state of navigation--*/
  color: #555;
  background-position: left bottom;
}

ul#topnav span {
  /*--Default state of navigation--*/
  background-position: left top;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <ul id="topnav" class="v2">
    <li><a href="http://www.sohtanaka.com/">Home</a></li>
    <li><a href="http://www.sohtanaka.com/web-design/web-design-services.php">Services</a></li>
    <li><a href="http://www.sohtanaka.com/web-design/designbombscom/">Portfolio</a></li>
    <li><a href="http://www.sohtanaka.com/web-design-blog/">Blog</a></li>
    <li><a href="http://www.sohtanaka.com/about/">About</a></li>
  </ul>
</div>