what is wrong with this jquery drop down

Question

I have trying to create this jquery dropdown, but it doesn't work, Does anybody know If I am missing something in jquery or CSS

  <style type="text/css">
body{padding:0px;margin:0px;}
ul li{list-style-type:none;}
#cssdropdown{padding:0px;margin:0px;}
a{text-decoration:none;padding:0px;margin:0px;}
    .headLink{ display: inline-block; padding:10px;margin:10px;text-align:right;background-color:#999999;cursor:pointer;}
    .headLink ul{display:none;}
</style>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript">
    $(function() {
        $(".headLink").hover(function() {
            $('ul',this).css("display","block");
            $('ul',this).css("display","none");
        })
    })
</script>




<ul id="cssdropdown">
    <li class="headLink">Home
        <ul>
            <li><a href="#">Home1</a></li>
            <li><a href="#">Home4</a></li>
            <li><a href="#">Home2</a></li>
            <li><a href="#">Home3</a></li>
            <li><a href="#">Home5</a></li>
        </ul>
    </li>
    <li class="headLink">About
        <ul>
            <li><a href="#">About1</a></li>
            <li><a href="#">About2</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">About3</a></li>
            <li><a href="#">About5</a></li>
        </ul>
    </li>

    <li class="headLink">Contact
        <ul>
            <li><a href="#">Contact1</a></li>
            <li><a href="#">Contact2</a></li>
            <li><a href="#">Contact3</a></li>
            <li><a href="#">Contact4</a></li>
            <li><a href="#">Contact5</a></li>
        </ul>
    </li>
    <li class="headLink">Links
        <ul>
            <li><a href="#">Links1</a></li>
            <li><a href="#">Links2</a></li>
            <li><a href="#">Links3</a></li>
            <li><a href="#">Links4</a></li>
            <li><a href="#">Links5</a></li>
        </ul>
    </li>
</ul>

I am also not sure how this works with ul as a parameter. for function inside jquery Thanks

Answer 1

For starters you are showing and hiding the ul on hover. Change

$(function() {
        $(".headLink").hover(function() {
            $('ul',this).css("display","block");
            $('ul',this).css("display","none");
        })
    })

To

$(function() {
    $(".headLink").hover(function() {
        $('ul',this).css("display","block");
    }, function(){
        $('ul',this).css("display","none");
    })
})

Demo

Answer 2

There's a way to do this with pure CSS.

Remove the <script> tag, and replace your styles with these. No change to the HTML structure.

<style>
    *{padding:0;margin:0}
    ul{list-style:none}
    a{text-decoration:none}
    a:hover{color:red}
    .headLink{float:left;height:30px;line-height:30px;padding:0 10px;cursor:pointer}
    .headLink ul{display:none;position:absolute}
    .headLink:hover ul{display:block}
</style>