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