The jQuery submenu does not work - problem with CSS

advertisements

I am a newbie when it comes to web design and I am trying to integrate into my webpage a jQuery menu example that I found on a website.

But, apparently something is going wrong with CSS because when I comment the CSS related to menu, the jQuery Hover method is working. But, with that CSS, it does not work.

Tested on Windows with Firefox and Chrome latest versions. Surprisingly, the thing works fine with IE...

Find my webpage here: http://jsfiddle.net/qHVE7/ (I have commented menu CSS. Uncomment it to see the issue.)
This is the CSS that I have commented out.

/*Menu CSS*/
/*ul#topnav {
    margin: 0; padding: 0;
    float: left;
    width: 100%;
    list-style: none;
    position: relative;
    font-size: 1.2em;
    background:url(images/topnav_s.gif) repeat-x;
}
ul#topnav li {
    float: left;
    margin: 0; padding: 0;
    border-right: 1px solid #555;
}
ul#topnav li a {
    padding: 10px 15px;
    display: block;
    color: #f0f0f0;
    text-decoration: none;
}

ul#topnav li:hover { background: #1376c9 url (images/topnav_a.gif) repeat-x; }
ul#topnav li span {
    float: left;
    padding: 15px 0;
    position: absolute;
    left: 0; top:35px;
    display: none;
    width: 970px;
    background: #1376c9;
    color: #fff;
    -moz-border-radius-bottomright: 5px;
    -khtml-border-radius-bottomright: 5px;
    -webkit-border-bottom-right-radius: 5px;
    -moz-border-radius-bottomleft: 5px;
    -khtml-border-radius-bottomleft: 5px;
    -webkit-border-bottom-left-radius: 5px;
}
ul#topnav li:hover span { display: block; }
ul#topnav li span a { display: inline; }
ul#topnav li span a:hover {text-decoration: underline;}*/
/*Menu CSS Ends*/

And the original submenu code here: http://jsfiddle.net/7DXzP/

Where am I going wrong? Because I basically copy-pasted the javascript and CSS from the example.


add a margin to class link in css like

.links {
   position: relative;
   margin-top:250px;
}

without margin <div class="links"> comes over the menu