[jQuery] Assigning CSS 'display:block' by jquery not working

[jQuery] Assigning CSS 'display:block' by jquery not working


Hi,
I am trying to display a hidden ul by using the $("id").addClass()
method. For some reason the ul stays hidden. Can someone please help
me??
Thanks
##mystyle.css
ul#sitenav {
    padding:0;
}
ul#sitenav li{
display:inline;
list-style-type:none;
}
ul#sitenav li ul{
display:none;
}
.selected {
    display:block;
}
----------------------
##sitenav.html
<ul id="sitenav">
    <li>Home<ul id="home-subnav">
        <li>Events</li>
        <li>Restaurants</li>
        <li>Movies</li>
        <li>Nighlife</li>
        <li>Stage</li>
        </ul>
    </li>
    <li>Visiting<ul id="visiting-subnav">
         <li>Basic Information</li>
         <li>Hotels</li>
         <li>Attractions</li>
         <li>Essential</li>
         <li>Transportation</li>
         <li>Inquiries</li>
         </ul>
    </li>
    <li>Blog</li>
    <li>Classifieds</li>
</ul>
---------------------
##script in index.html
$(document).ready(function() {
$("#home-subnav").addClass("selected");
});