CODEWITHSUNDEEP
jqueryhtmlcssdrop-down-menu
Om3ga
Om3ga

Reputation: 32823

issue in jquery code

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>

Upvotes: 0

Views: 84

Answers (5)

Ofer Zelig
Ofer Zelig

Reputation: 17470

Check out the corrected jsFiddle.

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

Upvotes: 1

Didier Ghys
Didier Ghys

Reputation: 30666

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'>

Upvotes: 1

anhtran
anhtran

Reputation: 2034

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

Upvotes: 1

xdazz
xdazz

Reputation: 160833

It works. You should remember to load jQuery.

Upvotes: 1

Rahul
Rahul

Reputation: 1876

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

Upvotes: 1

Related Questions