Help with messed up links on a HTML5 website

It is a single-page scrolling website in HTML5,
I got the (free) template from here: http://speckyboy.com/2011/02/22/free...template-psds/

Here is the site: http://chileva.com
You can check the source (view->source) via your browser,
it is the only thing I have modified, I haven't touched the Java/CSS files at all.

Uses CSS3 and jQuery, works fine for the most part however...
That little red banner on the left side menu is a little messed up.

So, when you click any of the menu items, the red banner should stay behind the link you clicked to indicate it is active.

The thing is that when you click on DIPLOMA, it does load the diploma section,
however the red banner drops down and goes to CONTACT.

Likewise, when you click on CERTIFICATES, it does load the correct section again,
however the red banner drops down and goes to REFERENCES.

These are the only two instances when the red banner goes haywire...
For the rest of the menu items, it works fine.

Any help regarding this is very appreciated!

 

I haven't much experience on HTML5. I do know, however that it is in the very early beta stages and it is definitely not stable. Many of the older browsers do not support this and a good chunk the internet won't be able to access your site at all. I'd advise you to hold off on HTML5 for a while and wait until it is officially released (Last I heard, 2012-2014 release). If you still are stuck to your guts and want to use html5, I suggest looking up the ww3schools HTML5 articles, w3schools is a great resource!