Hi
I want to implement a simple floating horizontal nav bar, but its just not rendering. am i missing something

html:
<body>

<div id="content">
hello this is the example of floatable navigation
<ul class="nav">
<li> <a href="#">January</a></li>
<li> <a href="#">February</a></li>
<li> <a href="#">March</a></li>
<li> <a href="#">April</a></li>
<li> <a href="#">May</a></li>
</ul>


<div id="hello">

</div>
</div>


<script>

$(document).ready(function(){

$(window).scroll(function(){

$(window).scroll(function() {
$('#nav').css('top', $(document).scrollTop());
});

}); //ready

</script>

</body>

css:

.nav{
list-style-type:none;
background-color:red;
}

#content{
height:2000px;
width:500px;
background-color:#AA82E5;
}



.nav li{
float:left;
background-color:#00CC99;
color:black;
margin-left:2px;
margin-right: 2px;

}

it seems so simple,
#nav.top=document.scrollTop() right!//rough idea
then what am i missing
Thanks
Meera