/*
  http://htmldog.com/articles/suckerfish/dropdowns/
*/

/*
  Also remember that because we're floating things, the content underneath the dropdowns also needs to be cleared (clear: left).
*/

#nav, #nav ul {
  padding: 0;
  margin: 0;
  list-style: none;
  font-size: .9em;
}

#nav ul a {
  padding: 0;
  margin: 0;
  display: block;
/*  width: 10em; */
}

/* you need to specify a width in the #nav li selector or else Opera will chuck a wobbly */
#nav ul li {
  padding: 0;
  margin: 0;
  float: left;
/*  width: 10em; */
  list-style: none;
}

/*
  
  We obviously need to hide the lists that we want to 'drop down' but to make things as accessible as possible we need to avoid using display: none, which, as is commonly mentioned in image replacement write-ups, hides elements from some screen readers. You might think that there are a multitude of ways to deal with this, but having exhaustedly experimented with widths, heights, margins, top and clip across a large number of browsers, the best solution (accommodating multiple level lists anyway) lies in manipulating the left property.
  
  The CSS specs say that top, right, bottom and left values should offset an absolutely positioned box from its containing block. But unfortunately Opera decides to offset absolutely positioned boxes in relation to the page and that's why the original Suckerfish Dropdowns didn't work on Opera - because they relied on the top and left properties with explicit lengths.
  
  So instead of display: none we use left: -999em to propel the dropdown list out of view and then left: auto (rather than left: 0) to bring it back:

*/

#nav ul li ul {
  position: absolute;
/*  width: 10em; */
  left: -999em;
}

/*
#nav li:hover ul {
  left: auto;
}
*/

/*
The suckerfish js applies the 'sfhover' class to li elements in the 'nav' id'd ul element when they are 'moused over' and removes it, using a regular expression, when 'moused out'.

So now we've got the Suckerfish pumping out new classes, the next step is to simply duplicate the :hover selector with 'sfhover' class selectors:
*/

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

#nav ul li a {
  color: black;
  background: #ff9b00;
  text-decoration: none;
  padding: .1em;
  margin-right: 1em;
  font-size:.9em;
  font-weight: bold;
}

#nav ul li ul li a {
  color: black;
  background: #ff9b00;
  text-decoration: none;
  padding: .2em;
/*  width: 5em; */
  font-weight: bold;
  font-size:1.1em;
}

/*
#nav ul li ul {
  border: 1px solid black;
}
*/

#nav ul li ul li a:hover {
  background: #FFFF66;
  text-decoration: none;
}

#nav ul li a:hover {
  text-decoration: underline;
}

/* For multi-level.. the third-level list needs to drop down to the side of the corresponding list item, so we need to add this rule, which will apply to all dropdowns after the first one: */
#nav li ul ul {
  margin: -1em 0 0 5em;
}

/* Because we can't explicitly specify the top of the absolutely positioned boxes, they will sit below the line of the hovered list item, which is why the top margin of the next level of lists needs to be set to -1em. But this won't pull the menus up far enough the be in line with the corresponding list item because by default line heights are greater than 1em (usually 1.2em), so we need to add a little something to the initial ul rule set: */
#nav, #nav ul {
  padding: 0;
  margin: 0;
  list-style: none; 
  line-height: 1;
}

/* Due to the cascading effect whereby upon the second level list being displayed, the third level list would also be revealed, we also need to explicitly hide that third level list (remember that we need to duplicate the :hover pseudo class with the .sfhover class): */
#nav li:hover ul ul, #nav li.sfhover ul ul {
  left: -999em;
}

/* Now, this rule can be contradicted so that it is displayed when the corresponding list item is hovered over by expanding on the displaying of the dropdown (which with the single level dropdown was #nav li:hover ul, #nav li.sfhover ul { left: auto; }): */
#nav li:hover ul, #nav li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul {
  left: auto;
}