CSS - Suckerfish - Dodgy In I.e

I'm struggling with css on my joomla site. I'm trying to develop a dropdown that can have two levels to it. I've got something working with the following css but I have no idea what to change to line the menus up.
Code:

/* =======================================
Top Menu aka Main Menu
======================================= */
.moduletable_topmenu{
   padding:0;
   color: #333;
   height: 30px;
   margin: 0;
   width: 500px;
   font-size: 90%
}

.moduletable_topmenu h3 {
   background:#666;
   color:#fff;
   padding:0.25em 0;
   text-align:center;
   font-size:1.1em;
   margin:0;
}

.moduletable_topmenu ul{
   list-style: none;
   margin: 0;
   padding: 0;
}

.moduletable_topmenu li{
   margin: 0px 15px 0px 0px;
   float: left;
}
.moduletable_topmenu li ul {
   position: absolute;
   width: 135px;
   left: -999em;
   border: 1px solid #474748;
   border-bottom: none;
   top: 22px;
}
.moduletable_topmenu li:hover ul {
   left: auto;
}
.moduletable_topmenu li ul li {
   width: 135px;
   padding: 0;
   border-bottom: 1px solid #474748;
}

.moduletable_topmenu li a{
   display: block;
   padding: 5px;
   background-color:#fff;
   color: #000;
   font-weight: bold;
   text-decoration: none;
}
html>body .moduletable_topmenu li a {
   width: auto;
}

.moduletable_topmenu li ul li a {
   width: 125px;
   background-color: #221f20;
   color: #fff;
   /* --- 
   filter:alpha(opacity=80); 
   -moz-opacity: 0.8; 
   opacity: 0.8;*/
}


.moduletable_topmenu li a:hover,a#active_menu:link,a#active_menu:visited{
   color: #e22f00;
   text-decoration: none;
   /* --- 
   filter:alpha(opacity=100); 
   -moz-opacity: 1.0; 
   opacity: 1.0;*/
}

.moduletable_topmenu li ul li a:hover {
   background-color: #e22f00;
   color: #fff;
   background: url(../images/top_link_bg2_on.png) repeat-y top left;
}

.moduletable_topmenu li:hover ul, .moduletable_topmenu li.sfhover ul {
   left: auto;
}


.moduletable_topmenu ul li.active a {
   color: #038fd9;
   text-decoration: none;
}
.moduletable_topmenu li.parent.active a {
   color: #038fd9;
   text-decoration: none;
}
.moduletable_topmenu li.parent.active a:hover {
   color: #e22f00;   
}

.moduletable_topmenu li.parent.active ul li a {
   color: #fff;
   text-decoration: none;
}
.moduletable_topmenu li.parent.active ul li a:hover {
   color: #fff;
   text-decoration: none;
}

I am currently using IE 7 and my test site is located at http://vcob.org/2008test if you want to see the menu in action go to that site and mouse over the "About Joomla" link in the menu across the top of the page. You should notice how the sub-menus stack on top of each other and I can't get them to line up. Any help would be so appreciated as I need to get this to work and I can't seem to get anyone at Joomla to help me, thanks in advance.

If you are having problems with Son of Suckerfish and IE7, where the drop down menu will not disappear like it should. Take out the javascript because you do not need it with IE7, but if you still want IE6 to work then put it in.

For IE7, you need to add


Code:

*:first-child+html #nav {
height: 1%;
}
*:first-child+html #nav li {
height: 1%;
} 

to your css and you will be fine. Don't ask me why, Don't ask how, i just chalk it up to just IE

I built a custom Suckerfish CSS dropdown nav, with a portion of the code for which is below:

Code:

#nav {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: #67670f;
text-align: left;
}

ul {
padding: 0;
margin: 0;
list-style: none;
}

li.navsep {
float: left;
width: 2px;
}

li.home {
float: left;
position: relative;
width: 61px;
}

li.home img {
border: 0;
}

li.ourproducts {
float: left;
position: relative;
width: 132px;
z-index: 500;
}

li.ourproducts img {
border: 0;
}

li.ourproducts ul {
display: none;
position: absolute;
top: 0;
left: 0;
width: 132px;
background-color: #fff;
}

li.ourproducts ul a, li.ourproducts ul a:visited {
display: block;
padding: 3px 0 3px 3px;
margin: 0;
color: #67670f;
text-decoration: none;
width: 129px;
}

li.ourproducts ul a:hover {
display: block;
background-color: #e4e2db;
color: #67670f;
text-decoration: none;
}

The focus is on the li.ourproducts a, li.ourproducts a:visited declaration.

In IE6, the background on :hover is 3 pixels shy of covering the whole list item. I know this must have something to do with the padding. FF however, renders it fine.

I figured that IE6 would handle the box model fine. When I make the width 132px however for li.ourproducts a, li.ourproducts a:visited, in IE6 it's fine and in FF it's 3 pixels farther than it should be (135px).

Can anyone hint at what the problem might be? I can't seem to get the declaration so both see it fine.

-B

I've messed with this for a couple days now. I can't seem to get it to do what I need it to. Any help would be much appreciated

I need to add a 3rd column to the menu

My code between the body and /body tags

I marked the place I need the 3rd column with: *** ( Need to add a 3rd column for the filters ) ***

Code:

<ul id="nav">

	<li><a href="#">Home</a>
</li>
	<li><a href="#">Maps</a>
	</li>
	<li><a href="history.php">History</a>
	</li>
	<li><a href="#">Contractors We Recommend</a>
	</li>
	<li><a href="#">Products We Recommend</a>
		<ul>
			<li><a href="#">Pool Accessories</a>
			<ul>

				<li><a href="#">Pool Accessories</a></li>
				<li><a href="#">Pool Accessories</a></li>
				<li><a href="#">Pool Accessories</a></li>
				<li><a href="#">Pool Accessories</a></li>
				<li><a href="#">Pool Accessories</a></li>
			</ul>
				
			</li>
			<li><a href="#">Pool Chemicals</a>
			<ul>

			<li><a href="#">Pool Chemicals</a></li>					<li><a href="#">Pool Chemicals</a></li>
			<li><a href="#">Pool Chemicals</a></li>
			<li><a href="#">Pool Chemicals</a></li>
			<li><a href="#">Pool Chemicals</a></li>
			</ul>
				
			</li>

			<li><a href="#">Pool Filters</a>
			<ul>

			<li><a href="#">Pool Filters</a></li>					<li><a href="#">Pool Filters</a></li>
			<li><a href="#">Pool Filters</a></li>
			<li><a href="#">Pool Filters</a></li>
			<li><a href="#">Pool Filters</a></li>
			</ul>
				
			</li>

***  ( Need to add a 3rd column for the filters ) ***



			<li><a href="#">Pool Heaters</a>
			<ul>
			<li><a href="#">Hayward</a></li>
			<li><a href="#">Pentair</a></li>
			<li><a href="#">Sta-Rite</a></li>

			</ul>
			</li>
			<li><a href="#">Pool Motors</a>
			<ul>
			<li><a href="#">Pool Motors</a></li>


			</ul>
				
			</li>
			<li><a href="#">Pool Sweeps</a>
			<ul>
			<li><a href="#">Hayward</a></li>
			<li><a href="#">Pentair</a></li>
			<li><a href="#">Sta-Rite</a></li>
			</ul>
	
</li>






<div id="content">
	
</div>

Thanks for any help!

Hi everyone,

So I'm implementing the suckerfish dropdown into one of my sites. I'm having a bit of trouble getting something to work correctly. I did most of the grunt work on getting it customized, but I was hoping someone could help me figure out a few minor details.

The version of the drop down I had to make has images for the top level (main level) of the navigation, and each image is a unique size. In doing so, as well as adding padding to the second level li for aesthetic purposes, in IE the menu doesn't drop but floats over to the right. I'm not sure why this is.

Also, I know this may be more fit for the JavaScript area, and I'll repost there if necessary, but I'd like to keep the top level image in the "over" state while the cursor is on that 2nd level dropdown. Is that possible?

I'll be anxious for your feedback, this has been driving me crazy all day.

Here's the code.

XHTML:
Code:

<div id="nav">
<ul>
<li class="one"><a href="#"><img src="images/home.gif" /></a></li>
<li class="two"><a href="#" onmouseover="document.two.src='images/nav-our_products_on.gif';" onmouseout="document.two.src='images/nav-our_products_off.gif';"><img name="two" src="images/nav-our_products_off.gif" /></a>
<ul>

<li><a href="#">sublink 1</li></a>
<li><a href="#">sublink 2</li></a>
</ul>
</li>
</ul>
</div>

CSS
Code:

#nav {
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: #67670f;
}

#nav ul {
margin: 0;
padding: 0;
list-style: none;
}

#nav ul li.one {
float: left;
margin: 0;
padding: 0;
width: 51px;
list-style: none;
}

#nav ul li.one img {
border: 0;
}

#nav ul li.two {
float: left;
margin: 0;
padding: 0;
width: 118px;
list-style: none;
position: relative;
}

#nav ul li.two img {
border: 0;
}

/* - begin level 2 - */

#nav ul li ul {
margin: 0;
padding: 0;
list-style: none;
position: absolute;
left: -999em;
border: solid 1px #ddd;
width: 118px;
voice-family: "\"}\""; 
voice-family:inherit;
width: 116px;
}

#nav ul li ul li a {
display: block;
padding: 3px 0 3px 3px;
margin: 0;
color: #67670f;
text-decoration: none;
width: 118px;
voice-family: "\"}\""; 
voice-family:inherit;
width: 113px;

}

#nav ul li.two ul li a:hover {
color: #52432c;
background-color: #e4e2db;
text-decoration: none;
}

#nav ul li:hover ul, #nav ul li.sfhover ul {
left: auto;
}

JavaScript
Code:

sfHover = function() {
	var sfEls = document.getElementById("nav").getElementsByTagName("LI");
	for (var i=0; i<sfEls.length; i++) {
		sfEls[i].onmouseover=function() {
			this.className+=" sfhover";
		}
		sfEls[i].onmouseout=function() {
			this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
		}
	}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

It seems that in IE something isn't being cleared, as it almost appears that the second level is in place directly next to the top level link that is activating the dropdown menu.

I look forward to your insight!

Thanks!

-Brian

I am trying to get my suckerfish dropdown menu to be centered on the page regardless of the resolution of the monitor. I know this is possible, but I just can't wrap my head around it. This is what I have so far:
Code:

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
	
	<head>
	
		<title><?php echo $title_page; ?></title>
		
		<meta http-equiv="content-type" content="application/xhtml+xml; charset=iso-8859-1" />
		
		<link rel="stylesheet" type="text/css" href="site_files/style/web.css" />
		
		<link rel="Shortcut Icon" href="site_files/pictures/favicon.ico" />
		
		<script type="text/javascript" src="site_files/ie_drop.js"></script>
		
	</head>
	
	<body>
		
		<div id="header">
			<p>NAVPACMETOCCEN San Diego Operational Home Page</p>
		</div>
		
		<div id="info">
			<p>This page will be down at 1100 GMT on 20 June 2005.  Click <a href="site_files/php/status.html">here</a> for more information.</p>
		</div>
		
		
		<div id="menu">
			<ul id="nav">
		
				<li><a href="index.php">Home Page</a></li>
				
				<li>Support
					<ul>
						<li><a href="site_files/php/a.html">Ship Specific</a></li>
						<li><a href="site_files/php/a.html">Unit Specific</a></li>
						<li><a href="site_files/php/a.html">Detachment</a></li>
						<li><a href="site_files/php/a.html">Mobile Env. Team</a></li>
						<li><a href="site_files/php/a.html">Coast Guard</a></li>
					</ul>
				</li>

				<li>Satellite
					<ul>
						<li><a href="site_files/php/a.html">Infrared</a></li>
						<li><a href="site_files/php/a.html">Visual</a></li>
						<li><a href="site_files/php/a.html">Water Vapor</a></li>
						<li><a href="site_files/php/a.html">Lightning</a></li>
						<li><a href="site_files/php/a.html">Analysis</a></li>
					</ul>
				</li>
				
				<li>Products
					<ul>
						<li><a href="site_files/php/a.html">Warnings</a></li>
						<li><a href="site_files/php/a.html">Forecasts</a></li>
					</ul>
				</li>
				
				<li>Aviation 
					<ul>
						<li><a href="site_files/php/a.html">Products</a></li>
						<li><a href="site_files/php/a.html">Contact Info.</a></li>
						<li><a href="site_files/php/a.html">OBS/TAFS</a></li>
						<li><a href="site_files/php/a.html">Aviation Links</a></li>
					</ul>
				</li>

				<li><a href="site_files/php/links.html">Links</a></li>

			</ul>
		</div>
		
				<div id="leftside">
		
			<p class="leftmenu"><a href="http://www.navy.com">Navy Jobs</a></p>
			
			<p class="leftmenu"><a href="http://www.donhr.navy.mil/NoFearAct.asp">No Fear Act</a></p>
			
			<p class="leftmenu"><a href="http://www.navy.mil">U.S. Navy Website</a></p>
			
			<p class="leftmenu"><a href="html/privacy.html">Privacy Policy</a></p>
			
			<p class="leftmenu"><a href="site_files/disclaimer.html">DoD Disclaimer</a></p>
			
		</div>

	</body>
	
</html>

And here is the style sheet:

Code:

/* This part tells us how the hyperlinks will be handled by the browsers, and also what the background will be */


a:link { /* This is the link standard color*/
	color: #000000; /*black*/
	}
a:visited { /* This is the color of an already visited link*/
	color: #800080;/*purple*/
	}

a:hover {/* This is the color your link will take when you move your mouse over it*/
	color: #FF0000;/*red*/
	text-decoration: none;
	}
	
a:active {/* This is the color and effect when you physically click on the link*/
	color: #008080;  /*teal*/
	}

a { /*This tells the browser not to underline any links */
	text-decoration: none;  
	}


/* This begins the header and the information notice portion */

#header {
	margin: -14px -8px 0px -8px;
	padding: 10px;
	height: auto;
	background: #000060;
	}

#header p {
	margin: 0;
	height: auto;
	color: #FFFF1B;
	text-align: center;
	font: small-caps 24px verdana, san-serif, serif;
	}

#info {
	margin: -1px -8px 0px -8px;
	padding: 1px;
	height: auto;
	}

#info p {
	margin: 0;
	height: auto;
	color: #0000FF;
	background: #FFFFFF;
	text-align: center;
	font: bold 12px arial, san-serif, serif;
	}

/* This ends the header and the information notice portion */





/* This begins the Drop-down menu portion*/

#menu { /* Top-Right-Bottom-Left */
	margin: 0 0 0 145px;
	padding: 0;
	width: auto;
	font: small-caps bold 12px verdana, san-serif, serif;
	}

ul { /* all lists */
	padding: 0;
	margin: 0;
	list-style: none;
	}

li { /* all list items */
	float: left;
	position: relative;
	width: 125px;
	}

li ul { /* second-level lists */
	display: none;
	position: absolute;
	top: 14px;
	left: 0;
	}

li>ul { /* to override top and left in browsers other than IE, which will position to the top right of the containing li, rather than bottom left */
	top: auto;
	left: auto;
	}

li:hover ul, li.over ul { /* lists nested under hovered list items */
	display: block;
	}
	
/* This ends the drop-down menu portion */	




/* This begins the left-side menu portion */
	
#leftside {
	margin: 100px 0px 0px -8px;
	width: 115px;
	color: #000000;
	font: small-caps 12px arial, san-serif, serif;
	}
	
.leftmenu {
	margin: 5px 0 2px 0;
	height: 15px;
	background: #DDEEFF;	
	}
	
#pkinotice {
	margin: 0px 50px 0px 125px;
	font: bold 12px arial, san-serif, serif;
	}
	
.pki {
	border: 2px solid #FF0000;

As you can see, I've just moved it over manually 145 px, and that centers it pretty well if you are viewing it at 1024x768, but at higher resolutions, the 145px is not sufficient for the centering.

If anyone has an idea on how to fix it, I'd appreciate help. The solution must be able to validate, and work in both IE and a compliant browser (mozilla or firefox is what I use). Also, if the style sheet code can be cleaned up, or you see mistakes, don't hesitate to tell me. I've been learning CSS2.1 for about 3 months now, but I am not a whiz at it... I appreciate the help.



Many thanks...

Bryan

Hi all

This is the place I need help with
http://www.simon.rochester.edu/source%20files/newpage/web5/
at the white navigation bar on the top, the dropdown is aligned to the top right corner rather than bottom left. I looked up suckerfish page and found out that's what IE does, so I added the fix:

top:100%;
left:0;

to #topnav li ul

However, nothing happens. I tried a slew of other things, nothing seems to change that bit. Can anyone help?

Also if you notice, the white bar navigations are images, those images get compressed for some damn reason in IE. Mozilla doesn't have any of these problems.

I implemented IE7 patch as well

http://www.strutmag.com/menu06/

CSS

In IE:Win The dropdown does not drop down right below the black tab, as it should; it starts to drop down about halfway through the tab. This is my first time really customizing a Suckerfish menu and I'm not really sure how I would go about tackling this problem. Thanks for any help or suggestions!

Suckerfish came into my life recently and has not only offered a great deal of freedom with dynamic menus at lower overheads than most (totally) Javascript alternatives, but has also had me tearing hairs out more frequently than most other things I know.

The problem I currently face is when viewing my menus in IE6. At first this suggests that the issues lie within the Javascript of the Suckerfish menus...

The pages in questions are located at the following addresses (please excuse the mid-construction state of each):
www.cheapboilers.com/sandbox/index.html
www.cheapboilers.com/sandbox/baxi_105.html

Take the grey vertical menu on the left hand side. The first level appears fine, but the problem is with the second level. In index.html all appears well. However in baxi_105.html when moving down the list in the second level menu the menu disappears when moving from the first to the second item.

At first I thought the problem was to do with the margins surrounding the elements - I thought the li element had detected the mouse as having left the element as it passed over the border. If this were true then the same would happen with the index.html page (which uses the same code/html/css). It does not.

My current theory is that the other elements on the page are somehow interfering with the Suckerfish menus. Index.html has nothing but text in the content of the page. baxi_105.html has images, links etc in it. This theory is backed up by going to the bottom list item in index.html (Worcester) and viewing the second level menu for it. The menu vanishes as with all the menus on baxi_105.html. It is as if the footer of the page is interfering with the operation of the menus.

This disappearing menu issue is driving me up the wall. Please can someone offer a solution?

Thanks in advance.
Andy

I was working on a menu following the suckerfish tutorial at Alist Apart and I've got it working in FF but not IE6. Big surprise. There's 2 issues with IE 6:

1. The menu is sitting lower in IE than in FF.

2. The dropdowns aren't working in IE at all. I've applied the js hack and it's still not working. I can't find what I'm missing but I know it's there somewhere.

Here's the url: menu

Please help. Thanks.

Brad

Hi
I hope this is going to be a simple question!!
I have used the suckerfish menu and all I would like to do is have the menu in the center of the page with a blue border extending from the sides of the menu to the edge of the page.

The page can be viewed on http://uk.geocities.com/g_foxon/example1.htm

cheers
Wistar

Hi from Athens,Greece!
Glad to be here and hope i can help u as much as u help others and me of course.
I have a problem that i think its common enough to give me a quick reply.
I m using a separate ie css for a Joomla template, in that template suckerfish is used for the top drop down menu.

When i open my forum as wrapped, under the top menu i also have the main menu for the forum.
So if i click to the top drop down menu it appears like its obstructed by the forum main menu and its deosnt function well.
I m gonna attach 2 pics, the first one is from opera and the other one its from IE

the ie_css code its like this div#horiz-menu {

PHP Code:
}

div#nav {
  position: absolute;
  top: 98px;
  left: 12px;
}

#nav ul ul a.daddy {
    width: 166px;
}

#access a {
    cursor: hand;
} 

I'm modifying the Suckerfish dropdown menu, and while it looks perfect in FF, it's slightly off in IE (shocker, I know).

In IE, the top-level menu items don't conform to the 20px height I've been using as a standard when you hover above them. I've done a ton of fiddling to see if I can solve the problem, but can't get it. I'm willing to bet the answer is simple, and that someone will catch something I missed.

The menu is being developed at:

http://ts.bisonman.com/dropdown_test.php

And here's the code:

Code:

<style type="text/css">

body {
	font-family: arial, helvetica, serif; 
}

div.navbar {
	width: 780px;
	height: 20px;
	background: #6699CC;
}


ul { /* all lists */
	height:20;
	padding: 0px;
	margin: 0;
	list-style: none;
	white-space: nowrap;

}

li { /* all list items */
	float: left;
	position: relative;
	width: 110px;
	height: 20px;
	background: #6699CC;
	color: #FFFFFF;
	text-decoration: none;
	font-size: 15px;
	font-weight: bold;
	white-space: nowrap;
}

li ul { /* second-level lists */
	display: none;
	position: absolute;
	top: 1em;
	left: 0;
	width: 180px;
	white-space: nowrap;
	background: #FFFFFF;
}

li>ul { /* to override top and left in browsers other than IE, which will position to the top right of the containing li, rather than bottom left */
	top: auto;
	left: auto;
}

li:hover ul, li.over ul { /* lists nested under hovered list items */
	display: block;
	height: 20px;

}

li:hover a, li.over a { /* maintains block and border width */
	display: block;
	height: 20px;
	white-space: nowrap;
}

li:hover ul a, li.over ul a { /* creates border around dropdown menus */
	width: 180px;
	height: 20px;
	/* border-style: solid;
	border-width: 1px;
	border-color: #FFFFFF; */
	white-space: nowrap;
}

#content {
	clear: left;
}

a {
	text-decoration: none;
	color: #FFFFFF;
	height: 20px;
}

a.under {
	width: 160px;
	height: 20px;
	background: #6699CC;
	color: #FFFFFF;	
}

a:hover {
	background: #FFFFFF;
	color: #6699CC;
}

</style>

<script type="text/javascript"><!--//--><![CDATA[//><!--
startList = function() {
	if (document.all&&document.getElementById) {
		navRoot = document.getElementById("nav");
		for (i=0; i<navRoot.childNodes.length; i++) {
			node = navRoot.childNodes[i];
			if (node.nodeName=="LI") {
				node.onmouseover=function() {
					this.className+=" over";
				}
				node.onmouseout=function() {
					this.className=this.className.replace(" over", "");
				}
			}
		}
	}
}
window.onload=startList;

//--><!]]></script>


</HEAD>
<BODY BGCOLOR="#FFFFFF" TEXT="#000000">

<!-- <div class="navbar"> -->

<table width=780 bgcolor=#6699CC border=0 height=20 cellpadding=0 cellspacing=0>
<tr>

<td valign=top width=20 NOWRAP height=20>&nbsp;</td>


<td valign=bottom NOWRAP height=20>

<ul id="nav">
  <li><a href="/index.php?page=about">About</a>
    <ul>
	 <li><a class="under" href="/index.php?page=faculty">Faculty</a></li>
      <li><a class="under" href="/index.php?page=about&subject=history">History</a></li>
      <li><a class="under" href="/index.php?page=about&subject=alumni">Alumni</a></li>
      <li><a class="under" href="/index.php?page=about&subject=philosophy">Philosophy</a></li>
      <li><a class="under" href="/index.php?page=about&subject=advisory_board">Advisory Board</a></li>
      <li><a class="under" href="/index.php?page=about&subject=letter_from_terry">Message from Terry</a></li>
		</ul>
	</li>

  <li><a href="/index.php?page=classes">Classes</a>
    <ul>
      <li><a class="under" href="/index.php?page=classes&subject=scenestudy">Ongoing Scene Study</a></li>
      <li><a class="under" href="/index.php?page=classes&subject=beginning">Beginning Technique</a></li>
      <li><a class="under" href="/index.php?page=classes&subject=on_camera_1">On Camera</a></li>
      <li><a class="under" href="/index.php?page=classes&subject=body_dynamics">Body Dynamics</a></li>
      <li><a class="under" href="/index.php?page=classes&subject=vocal_production">Vocal Production</a></li>
      <li><a class="under" href="/index.php?page=classes&subject=specialty">Specialty Classes</a></li>
      <li><a class="under" href="/index.php?page=classes&subject=conservatory">Conservatory/Intensive</a></li>
    </ul>
  </li>

  <li><a href="/index.php?page=theater">Theater</a>
    <ul>
      <li><a class="under" href="/index.php?page=theater&subject=on_stage_now">On Stage Now</a></li>
      <li><a class="under" href="/index.php?page=theater&subject=current_season">Current Season</a></li>
      <li><a class="under" href="/index.php?page=theater&subject=past_seasons">Past Seasons</a></li>
      <li><a class="under" href="/index.php?page=theater&subject=past_reviews">Past Reviews</a></li>
      <li><a class="under" href="/index.php?page=theater&subject=auditions">Auditions</a></li>
      <li><a class="under" href="/index.php?page=theater&subject=tickets">Tickets</a></li>
    </ul>
  </li>

  <li><a href="/index.php?page=awards">Awards</a>
    <ul>
      <li><a class="under" href="/index.php?page=theater&subject=past_reviews">Reviews</a></li>
      <li><a class="under" href="/index.php?page=awards&subject=mayors_award">Mayor's Award</a></li>
      <li><a class="under" href="/index.php?page=awards&subject=gore_letter">Al Gore Letter</a></li>
      <li><a class="under" href="/index.php?page=awards&subject=mekler_book">Terry in Mekler</a></li>
      <li><a class="under" href="/index.php?page=awards&subject=50_best">50 Best</a></li>
    </ul>
  </li>

  <li><a href="/index.php?page=events">Events</a>
    <ul>
      <li><a class="under" href="/index.php?page=events&subject=achievements">Achievement Awards</a></li>
      <li><a class="under" href="/index.php?page=events&subject=celebrities">Celebrities</a></li>
      <li><a class="under" href="/index.php?page=events&subject=conversations">"Conversations with..."</a></li>
    </ul>
  </li>

<li><a href="/index.php?page=membership">Members</a>
    <ul>
      <li><a class="under" href="/index.php?page=membership&subject=donate">Donations</a></li>
      <li><a class="under" href="/index.php?page=membership&subject=subscriptions">Subscriptions</a></li>
      <li><a class="under" href="/index.php?page=membership&subject=club_members">Club Members</a></li>
    </ul>
  </li>

<!--     <li><a href="/index.php?page=contact">Contact</a></li>

  <li><a href="/index.php">Home</a></li> -->

</ul>

</td>
</tr>
</table>

<!-- </div> -->

</BODY>
</HTML>