Nav Test

by eventide

HTML

<div id="nav">
    <ul id="navMenu">
        <li>Courses
            <ul>
                <li><a id="linkViewCourses" href="#">View All</a></li>
                <li><a id="linkMngCourses" href="#">Manage Courses</a></li>
                <li><a id="linkAddCourses" href="#">Add Courses</a></li>
                <li><a id="linkViewSpecs" href="#">View Specs</a></li>
                <li><a id="linkAddSpec" href="#">Add a Spec</a></li>
            </ul>
        </li>
        <li>People
            <ul>
                <li><a id="linkViewPeople" href="#">View All</a></li>
                <li><a id="linkViewGoTos" href="#">Go-Tos</a></li>
                <li><a id="linkViewInstructors" href="#">Instructors</a></li>
                <li><a id="linkAddPerson" href="#">Add a Person</a></li>
            </ul>
        </li>
        <li><a href="#">Item 3</a>
            <ul>
                <li><a href="#">Item 3-1</a></li>
                <li><a href="#">Item 3-2</a></li>
            </ul>
        </li>
        <li><a href="#">Item 4</a></li>
    </ul>
</div>
<!-- End #nav -->

CSS

#nav {
	font-size: 1.1em;
	width: 350px;
	margin: 3px auto;
	height: 25px;
	background-color: #92B0CC; }

#nav ul {
	margin: 5px;
	margin-left: 25px;
	padding: 0px; }

#nav ul li {
	display: inline;
	height: 15px;
	float: left;
	list-style: none;
	width: 80px;
	margin-top: 5px;
	position: relative; }

#nav ul li:hover {
	font-weight: bold;
	cursor: pointer; }

#nav li a {
	color: #000000;
	text-decoration: none; }

#nav li a:hover { font-weight: bold; }

#nav li ul {
	font-weight: normal;
	margin: 0px;
	margin-top: 3px;
	padding: 0px;
	display: none;
	position: absolute; }

#nav li:hover ul {
	display: block;
	width: 75px; }

#nav li li {
	list-style: none;
	display: list-item;
	width: 125px;;
	padding: 3px;
	margin-top: 0;
	margin-left: -5px;
	background-color: #92B0CC; }

#nav li li:not(:last-child) { border-bottom: 1px dashed #000000;}

#nav li li a {
	color: #000000;
	text-decoration: none;
	padding-left: 5px; }

#nav li li a:hover { font-weight: bold; }

JavaScript

$('#nav li').has('ul').mouseenter(function() {
    $(this).next('ul').slideDown();
}).mouseleave(function() {
    $(this).next('ul').delay(1000).slideUp();
});

/*
$('#nav li').has('ul').hover(function() {
    $(this).next('ul').toggleSlide('slow');
});
*/