[jQuery] Hover delay possible without additional plugin?

[c.s.]

I've created a menu system simialr to the Brown.edu homepage except
I've done it without js due to target audience restrictions. I'd like
to have a hover delay so that when the user mouses over the link the
menu will display after a couple seconds. I'm interested in using
jquery and I spent the day looking around for a way to do it without
having to use any additional plugins. I know that superfish menu is an
option, but that would be too heavily js powered for this menus
purposes.

Additionally, the hover needs to be specified on the <a> tag, so that
the menu still works in IE regardless of js being on or off (if off,
the only thing missing would be the delay feature).

Is there a way to control delay using what is available in the jquery
library only?  Thanks, c.s.




This is a sample of the wireframe code:

HTML:

<ul id="topmenu">
        <li><a href="">this is the main link</a>
                <ul class="tags">
                        <form>
                        <div>
                                <li><input type="checkbox">hello</li>
                                <li><input type="checkbox">hello</li>
                                <li><input type="checkbox">hello</li>
                                <li><input type="checkbox">hello</li>
                                <li><input type="checkbox">hello</li>
                                <li><input type="checkbox">hello</li>
                        </div>
                        <div>
                                <li><input type="checkbox">hello</li>
                                <li><input type="checkbox">hello</li>
                                <li><input type="checkbox">hello</li>
                                <li><input type="checkbox">hello</li>
                                <li><input type="checkbox">hello</li>
                                <li><input type="checkbox">hello</li>
                        </div>
                        <div>
                                <li><input type="checkbox">hello</li>
                                <li><input type="checkbox">hello</li>
                                <li><input type="checkbox">hello</li>
                                <li><input type="checkbox">hello</li>
                                <li><input type="checkbox">hello</li>
                                <li><input type="checkbox">hello</li>
                        </div>
                        </form>
                </ul>
        </li>
        <li><a href="">this is the main link</a>
                <ul>
                        <form>
                                <li><input type="checkbox">hello</li>
                        </form>
                </ul>
        </li>
        <li><a href="">this is the main link</a>
                <ul>
                        <form>
                                <li><input type="checkbox">hello</li>
                        </form>
                </ul>
        </li>
</ul>

CSS:

ul {
        padding: 0; margin: 0;
  font: 1em sans-serif;}
ul li {
        list-style-type: none;
        border-top: 1px solid #604f4b;
  position: relative;
        margin: 0; padding: 0;
}
ul ul {
        display: none;
  background: #fff;

}

ul ul, ul ul form, ul ul form div {
        float: left;
}

ul ul:after,
ul li:after {
 content:".";
 display: block;
 height: 0;
 clear: both;
 visibility: hidden;
}


ul ul li {border: none;}

ul li:hover > ul {display: block;}
li a {
        display: block;
        padding: 5px 7px;
        text-decoration: none;
  background: #ccc;
}

ul#topmenu, ul ul {width: 500px;}