Enable Drop Down Nav Menu

This document is deprecated! The information on this page refers to a Thesis version that is now obsolete. Please visit the Thesis Docs for current documentation.

This Answer is only for version 1.5 or lower of Thesis; enhanced support for drop down menus was added as of version 1.6, so the steps below are not required if you are using the latest version.

Please note that the basic method described here may not function properly in IE6. If this is a concern for you, you should read the entire article (including comments) cited at the bottom of this post, to check for any additional suggestions which specifically address IE6 issues. You can also search or post in the Support Forums for other tips.

In the Thesis Options panel, under Navigation Menu, expand the “Select pages to include in nav menu:” section, and check the option for Use old Thesis nav style. Click the “Big Ass Save Button”.

Then, place this code in custom.css:

.custom ul#tabs li ul {display:none; position:absolute; list-style:none;}
.custom ul#tabs li ul li {float:none;}
.custom ul#tabs li:hover ul {display:block;}
.custom ul#tabs { margin-bottom:-1px;} /* Fix for IE6 */

To make this work in IE, you can add this Javascript to the Header Scripts field under Stats Software and Scripts on the Thesis Options panel:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript">
	$(function(){
		$("ul#tabs li:has(ul)").wrapInner("<span></span>");
		$("ul#tabs li span").hover(
		function(){
			$('ul', this).show();
		},
		function(){
			$('ul', this).hide();
		});
	});
</script>

Based on Thesis nav menus by Kristen Symonds of kristarella.com