issue in jquery code

Question

Hi I am trying to make a drop down menu. This may be a basic question but I am trying to make it work for the last hour or so but I do not know what is the problem in my code.

The problem is when I hover over the link then it should display drop down links but it does not show it.

Please check my code over here jsfiddle

EDIT

It works in jsfiddle but still it is not working for my here locally

here is my code

<html>
<head>
<style>
body {
    font-family: Arial;
}
.top-nav {
    list-style: none;
    margin:0; padding: 0;
}
.top-nav li {
    position: relative;
    width: 100px; height: 60px;
    display: block;
    float: left;
    margin-right: 1px;
}
.top-nav li a {
    width: 100px; height: auto;
    display: block; text-align: center;
    background: #cccccc; padding: 27px 0 17px 0;
    text-decoration: none; color: #6b6d6e;
}
.top-nav li a:hover {
    background: lightblue;
    color: #fff;
}
/*---------------------------*/
.top-nav li ul {
    padding: 0; margin: 0;
    list-style: none;
    display: none;
}
.wrap {
    -webkit-box-shadow: 0 0 9px #c0c0c0;
    width: 490px; height: 250px;
    padding: 2px 3px;
}
</style>
<script src="jquery.js" type="text/javascript" charset="utf-8"></script>
<script type='text/javscript'>
$(function() {
    $('.top-nav li').hover(function() {
        $('ul',$(this)).show();
    },function() {
        $('ul',$(this)).hide();
    });
});
</script>
<title></title>
</head>
<body>
    <ul class='top-nav'>
        <li><a href='#'>Menu</a>
            <ul>
                <li>
                    <div class='wrap'>Stuff Here</div>
                </li>
            </ul>
        </li>
        <li><a href='#'>Products</a>
            <ul>
                <li>
                    <div class='wrap'>Stuff Here</div>
                </li>
            </ul>
        </li>
    </ul>
</body>
</html>

Is it not working in jsfiddle you mean ? There is no prblem with your code, you have to select "jQuery" in the framework panel on the left... — Didier Ghys
– Didier Ghys, Commented Feb 19, 2012 at 7:30
I added the framework from the left panel now it is working in jsfiddle. Thats what I said in above update that it works in jsfiddle BUT it is not working locally on my computer. I added jquery library there but still not working. I do not know why? — Om3ga
– Om3ga, Commented Feb 19, 2012 at 7:41
Difficult for us the know what is not working on your computer. Do you get any error in the browser's javascript console (press F12 to display it) ? — Didier Ghys
– Didier Ghys, Commented Feb 19, 2012 at 7:42
when I add this line to my code $(function() {alert('hello');}); then when I reload my page it does not even alert anything. — Om3ga
– Om3ga, Commented Feb 19, 2012 at 7:47
There is also one typo in your html: type='text/javscript' should be type='text/javascript' — Didier Ghys
– Didier Ghys, Commented Feb 19, 2012 at 7:53

Rahul · Accepted Answer · 2012-02-19 07:30:04Z

1

I think you forgot to load the jquery library on the left nav bar. Check it now http://jsfiddle.net/rsarika/vAPHq/1/

answered Feb 19, 2012 at 7:30

Rahul

1,88618 silver badges32 bronze badges

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

Comments

xdazz · Accepted Answer · 2012-02-19 07:31:37Z

1

It works. You should remember to load jQuery.

answered Feb 19, 2012 at 7:31

xdazz

161k38 gold badges255 silver badges278 bronze badges

Comments

anhtran · Accepted Answer · 2012-02-19 07:37:19Z

1

You didn't choose the framework is 'jQuery' :)

answered Feb 19, 2012 at 7:37

anhtran

2,0544 gold badges27 silver badges55 bronze badges

Comments

Didier Ghys · Accepted Answer · 2012-02-19 07:57:22Z

1

You have a typo in the piece of code you added:

<script type='text/javscript'>  // missing a "a" in "javscript"

should be

<script type='text/javascript'>

answered Feb 19, 2012 at 7:57

Didier Ghys

30.6k9 gold badges77 silver badges82 bronze badges

Comments

Ofer Zelig · Accepted Answer · 2012-02-19 16:57:40Z

1

Check out the corrected jsFiddle.

Also, check out that you've selected jQuery from the selectbox on the left.

edited Feb 19, 2012 at 16:57

answered Feb 19, 2012 at 7:33

Ofer Zelig

17.5k9 gold badges63 silver badges94 bronze badges

Collectives™ on Stack Overflow

issue in jquery code

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related