_suckerfish.scss

/* SCSS port of CSS at http://htmldog.com/articles/suckerfish/dropdowns/ */
/* Built with compass http://www.compass-style.org */
/* Generates the styles for suckerfish dropdowns */

/* 
   Pass in the parameters $topLevelWidth and $lowerLevelWidth. The former controls the width of the first level,
   i.e. the visible level. The lower level is the width of the sub-levels, which get exposed on hover.

   Call this mixin with @import suckerfish(topLevelWidth, lowerLevelWidth), then style it as needed.

   To override any of these styles, place your code after the @import directive.

   For IE 6 compatibility, you must add javascript that attaches .sfhover class to mouseover.

   This will handle up to three levels of dropdowns.

   Be sure to minify before deploying to production.
*/

@mixin suckerfish($topLevelWidth, $lowerLevelWidth) {
	ul { 
		list-style-type: none;
		padding: 0;
		margin: 0;
		line-height: 1;
	}
	a {
		display: block;
		width: $topLevelWidth;
	}
	li {
		float: left;
		width: $topLevelWidth;
		&:hover, &.sfhover {
			ul {
				left:auto;
				
			    li {
			        float: none;
			        display: block;
			    }
				
				ul {
					left: -999em;
				}
			}
		}
		li:hover, li.sfhover {
			ul {
				left: auto;
			}
		}
		ul {
			position: absolute;
			width: $lowerLevelWidth;
			left: -999em;
			ul {
				margin: -1em 0 0 $lowerLevelWidth;
			}
		}
	}
}