dash-website/src/scss/_nav.scss

$m: 'nav';

$nav-height: 90px;

.#{$m} {
	float: right;
	text-align: right;

	@include mq($to: large) {
		display: none;
	}

	&__list {
		list-style: none;
	}

	&__item {
		position: relative;
		display: inline-block;
		font-weight: 300;
		letter-spacing: 0.02em;
		line-height: $nav-height;
		&:last-child > .nav__link {
			padding-right: 0;
		}

		&--languages {
			& > .nav__link {
				padding: 0 25px;
			}
		}

		&:hover {
			.nav__sublist {
				display: block;
				opacity: 1;
				animation: fadein 0.4s;
			}
		}
	}

	&__sublist {
		display: none;
		position: absolute;
		top: 100%;
		right: 0;
		padding-top: 10px;
	}

	&__subitem {
		line-height: 45px;
	}

	&__link {
		display: inline-block;
		padding: 0 10px;
		@include link-style(
			$link: rgba($color-white, 1),
			$visited: rgba($color-white, 1),
			$hover: rgba($color-white, 1),
			$active: rgba($color-white, 1));
		letter-spacing: -0.008em;
	}

	&--black {
		.#{$m} {
			&__link {
				@include link-style(
					$link: rgba($color-black, 1),
					$visited: rgba($color-black, 1),
					$hover: rgba($color-black, 1),
					$active: rgba($color-black, 1));
			}
		}
	}
}


@keyframes fadein {
	from { opacity: 0; }
	to   { opacity: 1; }
}