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.

image of what I had before I tried to implement the code in the JSFiddle

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!

On your live site you have an javascript error in VM31 autosaveform.js:29. This might cause your javascript execution to fail and cause other javascripts to not do anything. — Albin
– Albin, Commented Oct 23, 2014 at 19:24

wired_in · Accepted Answer · 2014-10-23 19:27:41Z

3

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

answered Oct 23, 2014 at 19:27

wired_in

2,6133 gold badges28 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

DanielNolan Over a year ago

Hi @wired_in I have just updated the livelink with your code and its still not working. Thanks for taking the time though man :)

wired_in Over a year ago

@DanielNolan Put the javascript code in the <head> section of the page instead of the <body>

wired_in Over a year ago

@DanielNolan If that doesn't work, it's an issue with the javascript errors on the page causing any subsequent javascript to not be executed.

DanielNolan Over a year ago

I did man I moved it to the body after as it wasn't working... I'm sorry about this @wired_in Ill just update my live link to show you lol

wired_in Over a year ago

Ok, put it directly before autosaveform.js in the <head> section.

|

Collectives™ on Stack Overflow

menu css and javascript not working

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related