.headerにhoverした際、#pankuzuを非表示にしたい

下記のサイトを参考にして、<div class="header">にhoverした際、<div id="pankuzu">が非表示になるように設定したのですが、全く反応しませんでした。

何が原因か、ご教示いただけますでしょうか。

参考にしたサイト：
show, hide (マウスオーバーで表示・非表示を切り替える)

HTML

<header>
    <div class="header">ヘッダー内容</div>
    <div id="pankuzu">
        <ul>
            <li>パンくずの内容</li>
            <li>パンくずの内容</li>
            <li>パンくずの内容</li>
       </ul>
    </div>
</header>

HEAD内のscript記述

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
    $('.header').mouseenter(function(){
        $('#pankuzu').hide();
    }).mouseleave(function(){
        $('#pankuzu').show();
    });
</script>