Required JavaScript jQuery files

1
• jquery-1.3.2.js
  Click jquery-1.3.2.js to view jquery file
• ui.core.js
  Click ui.core.js to view jquery file
2327

CSS

/*--------------------------------------------------------------------------
Phoenix Primary Navigation - Smooth Navigation
--------------------------------------------------------------------------*/	
#phoenix-primary-navigation {
	font-size: 10px;
	background:	black;
	/*background: url(images/topnav-bg.png) repeat-x;	*/
	clear:both;
	font-size:10px;
	height:35px;
	width:960px;	
	}

/* to override css in system-menus.css */
#phoenix-primary-navigation	li.leaf {
	list-style-image: none;
	list-style-type:none;
	}

/* to override css in system-menus.css */
#phoenix-primary-navigation	li.first {
	margin-left: 40px;
	padding-left: 40px;
	}

/* to override css in system-menus.css */
#phoenix-primary-navigation li.collapsed, li.expanded {
	list-style-image:none;
	list-style-type:none;
	}

	
#phoenix-primary-navigation ul.topnav {
	list-style: none;
	padding: 0 5px;
	margin: 0;
	float: right;
	background: #222;
	font-size: 1.2em;
	background: url(images/topnav-bg.png) repeat-x;	
	}

#phoenix-primary-navigation ul.topnav li {
	float: left;
	margin: 0;
	padding: 0 5px 0 0;
	position: relative; /*--Declare X and Y axis base for sub navigation--*/
	}

#phoenix-primary-navigation ul.topnav li a {
	padding: 10px 5px;
	color: #CBBEB6;
	font-weight: bold;
	display: block;
	text-decoration: none;
	float: left;
	}

#phoenix-primary-navigation ul.subnav li a {
	color: #fff;
	font-weight: normal;
	}

#phoenix-primary-navigation ul.topnav li a:hover{
	/*background: url(menu-images/topnav_hover.gif) no-repeat center top;*/
	}

#phoenix-primary-navigation ul.topnav li span { /*--Drop down trigger styles--*/
	width: 17px;
	height: 35px;
	float: left;
	background: url(images/subnav_btn.gif) no-repeat center top;
	background: url(images/button.png) no-repeat center top;
	}

#phoenix-primary-navigation ul.topnav li span.subhover {
	color: red;
	background-position: center bottom; 
	cursor: pointer;} /*--Hover effect for trigger--*/
	
#phoenix-primary-navigation ul.topnav li ul.subnav {
	list-style: none;
	position: absolute; /*--Important - Keeps subnav from affecting main navigation flow--*/
	left: 0; top: 35px;
	background: #333;
	margin: 0; padding: 0;
	display: none;
	float: left;
	width: 170px;
	z-index: 5000;
/*	border: 1px solid #111;*/
	}

#phoenix-primary-navigation ul.topnav li ul.subnav li{
	margin: 0; padding: 0;
/*	border-top: 1px solid #252525;*/ /*--Create bevel effect--*/
/*	border-bottom: 1px solid #444;*/ /*--Create bevel effect--*/
	clear: both;
	width: 170px;
	}

html #phoenix-primary-navigation ul.topnav li ul.subnav li a {
	float: left;
	width: 145px;
	background: #333 url(images/dropdown_linkbg.gif) no-repeat 10px center;
	padding-left: 20px;
	}

html #phoenix-primary-navigation ul.topnav li ul.subnav li a:hover { /*--Hover effect for subnav links--*/
	background: #222 url(images/dropdown_linkbg.gif) no-repeat 10px center;
	}

.subhover {
	color: red;
	}

#phoenix-primary-navigation ul ul li.last a {
	border-bottom: 3px #A97947 solid;
	}

JavaScript

$(document).ready(function(){

	$("ul.subnav").parent().append("<span></span>");
//Only shows drop down trigger when js is enabled (Adds empty span tag after
ul.subnav*)

	$("ul.topnav li span").click(function() { //When trigger is
clicked...

		//Following events are applied to the subnav itself (moving subnav up and
down)
		//$(this).parent().find("ul.subnav").slideDown('fast').show();
//Drop down the subnav on click
		
		$(this).parent().find("ul.subnav").slideToggle('slow').show();
//Drop down the subnav on click

		$(this).parent().hover(function() {
		}, function(){
			$(this).parent().find("ul.subnav").slideUp('slow'); //When the
mouse hovers out of the subnav, move it back up
		});

		//Following events are applied to the trigger (Hover events for the trigger)
		}).hover(function() {
			$(this).addClass("subhover"); //On hover over, add class
"subhover"
		}, function(){	//On Hover Out
			$(this).removeClass("subhover"); //On hover out, remove class
"subhover"

	});

});

HTML

<ul class="topnav">
<li class="leaf first"><a href="/drupal/phoenix/" class="home" title="Home">Home</a></li>
<li class="expanded active-trail"><a href="/drupal/phoenix/about-phoenix" class="about-phoenix active" title="About Phoenix">About Phoenix</a><br
/>
<ul class="subnav">
<li class="leaf first"><a href="/drupal/phoenix/history">History</a></li>
<li class="leaf last"><a href="/drupal/phoenix/mission">Mission</a></li>
</ul>
</li>
<li class="leaf"><a href="/drupal/phoenix/news" class="news" title="News">News</a></li>
<li class="collapsed"><a href="/drupal/phoenix/additional-services" class="additional-services">Additional Services</a></li>
<li class="leaf"><a href="/drupal/phoenix/clients/testimonials" class="testimonials">Testimonials</a></li>
<li class="leaf"><a href="/drupal/phoenix/aircraft" class="aircraft" title="Aircraft">Aircraft</a></li>
<li class="expanded last"><a href="/drupal/phoenix/contact-us" class="contact-us" title="Contact Us">Contact Us</a><br />
<ul class="subnav">
<li class="leaf first"><a href="/drupal/phoenix/tony-griffin" title="Tony Griffin">Tony Griffin</a></li>
<li class="leaf"><a href="/drupal/phoenix/barbara-cheng" title="Barbara Cheng">Barbara Cheng</a></li>
<li class="leaf"><a href="/drupal/phoenix/mark-griffin" title="Mark Griffin">Mark Griffin</a></li>
<li class="leaf last"><a href="/drupal/phoenix/stuart-perkins" title="Stuart Perkins">Stuart Perkins</a></li>
</ul>
</li>
</ul>