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

[Caisys]

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");
});