Cacher is the code snippet organizer for pro developers

/*
 ==========================================================================
  $Navigation Desktop
 ==========================================================================
 *
 * Requires Superfish jQuery Plugin
 * http://users.tpg.com.au/j_birch/plugins/superfish/download/
 *
 * Requires Superfish Mixin
 * https://gist.github.com/andesign-snippets/6e6636079cd218d25742
 *
 * Usage:
 * 1. Add .sfmenu class to block
 *    enable (Drupal Block_Class)[https://www.drupal.org/project/block_class]
 * 2. Add to scripts
 *    $('.sfmenu ul.menu').superfish();
 *
 */

.region-navigation {
	// Hide On Small Viewport
	@include MQ(Smax) {
		display: none;
	}

	@extend %clearFix;

	.sfmenu .content {
		@include superfish;

		// Config
		$navBgndColor: $brandPrimary; 		// Background Color
		$parentFontSize: 1.6;				// Parent Menu Font Size
		$expandFontSize: $parentFontSize;	// Sub Menu Font Size

		@include contrasted($navBgndColor);

		// ul {
		// 	min-width: 12em; /* allow long menu items to determine submenu width */
		// 	*width: 12em; /* no auto sub width for IE7, see white-space comment below */
		// }
		li {
			// white-space: nowrap; /* no need for Supersubs plugin */
			// *white-space: normal; /* ...unless you support IE7 (let it wrap) */
			line-height: 1.25;
		}
		a {
			@extend %unstyledLink;			
			zoom: 1; /* IE7 */
		}

		// Parent Links
		> ul.menu {
			$divider: 1px solid $white;
			@extend %tableCenter;
			border-left: $divider;
			border-right: $divider;
			> li {
				> a {
					padding: 0.3125em 0.625em;
					@include remFallback(font-size, $parentFontSize);
					@include contrasted($navBgndColor);
					// Arrow 
					&.sf-with-ul {
						padding: 0.3125em 0.625em 0.3125em 1.875em;
						@include icoMoon('chevron-down', after) {
							position: absolute;
							top: 50%;
							left: 0.625em;
							margin-top: -#{($parentFontSize*10)/2}px;
						}
					}
				}
				+ li > a {
					border-left: $divider;
				}
				.active-trail {
					@include contrasted(darken($navBgndColor, 20%));
				}
			}
		}

		// Expanded Links
		ul.menu ul {
			width: 15em;
			li {
				a {
					padding: 0.3125em 0.625em;
					@include remFallback(font-size, $expandFontSize);
					@include contrasted(lighten($navBgndColor, 30%));
					@include transition(background .2s);
					border: 1px solid rgba($navBgndColor, .3);
					&.sf-with-ul {
						padding-right: 1.875em;
						@include icoMoon('chevron-right', after) {
							position: absolute;
							top: 50%;
							right: 0.625em;
							margin-top: -#{($expandFontSize*10)/2}px;
						}
					}
				}
				&:hover > a,
				&.sfHover > a {
					@include contrasted(lighten($navBgndColor, 50%));
					/* only transition out, not in */
					@include transition(none);
				}
				+ li > a {
				}
			}
		}

		// Position on Expanded Links on Left
		> ul.menu > li:nth-child(n+5) {
			ul {
				left: auto;
				right: 0;
				ul {
					left: auto;
					right: 100%;
				}
			}
		}
	}
}