menu css and javascript not working

Question

Hello I am having a real problem implementing the code below in the JSFiddle. It works perfectly in the fiddle but when I implement it into my website it does not work. Below is an image of what I have in my html. It is a horizontal menu bar with a drop down horizontal menu bar below.

The JSFiddle of what I am trying to achieve The main difference that I can see is making the css .active instead of .hover which is what I had previously.

The CSS that is not working

#menu, #menu ul {
margin: 0 auto;
padding: 0;
background-color: #FFFFFF;
}
#menu {
font-weight:400;
display: table;
width: 100%;
list-style: none;
position: relative;
top: -20px;
text-align: center;
left: -10px;
-webkit-box-shadow: 0px 3px 5px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 0px 3px 5px 0px rgba(50, 50, 50, 0.75);
box-shadow: 0px 3px 5px 0px rgba(50, 50, 50, 0.75);
font-size: 18px;
height: 20px;
z-index: 1101;
}
#menu.fixed {
position: fixed;
top: 0;
width: 100%;
}
#menu li {
display: table-cell;
list-style: none;
padding-right: 10px;
left: 50px;
vertical-align: middle;
}
#menu > li.active > ul {
background:#FFF;
display: block;
left: 0;
width: 100%;
-webkit-box-shadow: 0px 3px 2px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 0px 3px 2px 0px rgba(50, 50, 50, 0.75);
box-shadow: 0px 3px 2px 0px rgba(50, 50, 50, 0.75);
border-top:thin dotted #999;
top: 32px;
height: 30px;
}
#menu > li > ul {
display: none;
position: absolute;
 text-align: center;

}
#menu li a {
display: block;
padding: 2px 10px;
text-decoration: none;
font-weight: 400;
white-space: nowrap;
color: #333;


}
#menu li a:hover {
color: #28B701;
font-size: 18px;
vertical-align: middle;
font-family: 'Lato', "sans-serif; 700;";
}
#menu li ul li {display: inline-block;
float:none; }

This is a livelink of the broken page as I believe this is a site specific issue, I shall delete it for future posterity of this post.

PLEASE PLEASE HELP ME!

Answer 1

Your issue is that you are executing the javascript for the menu before the page is finished loading. The reason it works in the jsFiddle is because you have it set to execute the javascript 'onLoad', but in your actual website you are executing it immediately.

The solution is to wrap your javascript code in the jQuery DOM Ready event handler so that it executes when the DOM is ready:

$(function () {
    $('#menu > li').hover(function() {
        $( this ).addClass( "active" ).siblings().removeClass("active");
    });
});

Updated Fiddle