Wordpress Navigation

WordpressNav.scss

.main-navigation {
	background: #333;
	position: fixed;
	top: 0;
	height: 4.5rem;
	width: 100%;
	.nav-menu {
		@include container();
		list-style: none;
	}
}
.site-branding {
	margin-top: 5rem;
	@include container();
}

li.menu-item-has-children > a:after {
	font-family: 'FontAwesome';
	content: '\2003\f107';
	float: right;
}
.main-navigation .nav-menu > li {
	list-style-type: none;
	display: inline-block;
	position: relative;
	width: auto;
	padding: 1rem;
	transition: all 500ms ease;
	&:hover{
		background: rgba(255,255,255,.2);
		// width: 100%;
	}
	> a {
		padding: 0;
	}
	a {
		color: white;
		// padding: 1rem;
		text-decoration: none;
		display: inline-block;
	}
	> ul.sub-menu {
		opacity: 0;
		visibility: hidden;
		position: absolute;
		padding: 0;
		transition: all .2s ease;
		margin-top: 20px;
		min-width: 100%;
		list-style-type: none;
		background: #333;
		top: 4.4rem;
		left: 0;
		z-index: 2;
		li {
			&:hover { background: rgba(255,255,255,.2); }
			text-align: left;
			a {
				padding: 1rem;
				display: block;
			}
		}
		.menu-item-has-children ul.sub-menu {
			opacity: 0;
			list-style: none;
			visibility: hidden;
			position: absolute;
			left: 100%;
			margin-left: 30px;
			min-width: 100%;
			transition: all .2s ease;
			background: #333;
		}
		.menu-item-has-children:hover ul.sub-menu {
			opacity: 1;
			visibility: visible;
			margin: -4.4rem 0 0;
		}
		.menu-item-has-children > a:after {
			font-family: 'FontAwesome';
			content: '\2003\f105';
		}
	}
	&:hover{
		> ul.sub-menu {
			opacity: 1;
			visibility: visible;
			margin: 0;
		}
	}
}