Example _site-navigation.scss for Genesis Sample. Only a starting point, so customise as needed!

gistfile1.scss

// Navigation (.genesis-nav-menu)
$navigation-font-size: 16px !default;
$navigation-line-height: 1 !default;
$navigation-link-color: #000 !default;
$navigation-link-color-hover: #e5554e !default;
$navigation-link-padding: 30px 24px;

// Navigation submenus
$navigation-submenu-width: 200px;
$navigation-submenu-link-font-size: 14px !default;
$navigation-submenu-link-background-color: #fff !default;
$navigation-submenu-link-border-color: #eee !default;
$navigation-submenu-link-padding: 20px !default;

// Site Header Navigation
$navigation-header-border-color: #eee !default;

// Primary Navigation
$navigation-primary-background-color: #333 !default;
$navigation-primary-link-color: #000 !default;
$navigation-primary-submenu-link-color: #333 !default;
$navigation-primary-link-color-hover: #e5554e !default;

// Secondary Navigation
$navigation-secondary-background-color: #fff !default;

// Move the above into _variables.scss


.genesis-nav-menu {
	clear: both;
	font-size: $navigation-font-size;
	line-height: $navigation-line-height;
	width: 100%;


	.menu-item {
		display: inline-block;
		text-align: left;
	}

	a {
		color: $navigation-link-color;
		display: block;
		padding: $navigation-link-padding;
	}

	a:hover,
	.current-menu-item > a,
	.sub-menu .current-menu-item > a:hover {
		color: $navigation-link-color-hover;
	}

	.sub-menu {
		left: -9999px;
		opacity: 0;
		position: absolute;
		transition: opacity .4s ease-in-out;
		width: $navigation-submenu-width;
		z-index: 99;

		a {
			background-color: $navigation-submenu-link-background-color;
			border: 1px solid $navigation-submenu-link-border-color;
			border-top: 0;
			font-size: $navigation-submenu-link-font-size;
			padding: $navigation-submenu-link-padding;
			position: relative;
			width: $navigation-submenu-width;
		}

		.sub-menu {
			margin: -55px 0 0 ($navigation-submenu-width - 1);
		}
	}

	.menu-item:hover {
		position: static;
		
		> .sub-menu {
			left: auto;
			opacity: 1;
		}
	}

	// > .first > a {
	// 	padding-left: 0;
	// }

	// > .last > a {
	// 	padding-right: 0;
	// }

	// > .right {
	// 	color: #fff;
	// 	float: right;
	// 	list-style-type: none;
	// 	padding: 30px 0;
	// }

	// > .right > a {
	// 	display: inline;
	// 	padding: 0;
	// }

	// > .rss > a {
	// 	margin-left: 48px;
	// }

	// > .search {
	// 	padding: 10px 0 0;
	// }
}


// Site Header Navigation

.site-header {

	.sub-menu {
		border-top: 1px solid $navigation-header-border-color;

		.sub-menu {
			margin-top: -56px;
		}
	}

	li li {
		margin-left: 0;
	}
}


// Primary Navigation

.nav-primary {
	background-color: $navigation-primary-background-color;

	a {
		color: $navigation-primary-link-color;
	}

	.sub-menu a {
		color: $navigation-primary-submenu-link-color;
	}

	a:hover,
	.current-menu-item > a,
	.sub-menu .current-menu-item > a:hover {
		color: $navigation-primary-link-color-hover;
	}
}


// Secondary Navigation

.nav-secondary {
	background-color: $navigation-secondary-background-color;
}