这个jQuery下拉菜单有什么问题

Question

我试图创建这个jquery下拉列表，但是它不起作用，有人知道我是否在jquery或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>

我也不确定如何this ul作为参数使用。 对于jQuery内部的功能谢谢

Answer 1

对于初学者，您正在显示和隐藏ul悬停。 更改

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

至

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

演示版

Answer 2

有一种使用纯CSS做到这一点的方法。

删除<script>标记，并用这些样式替换您的样式。 HTML结构没有变化。

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