我的下拉菜单被推下 - 无法找到正在这样做的课程

Question

我的下拉菜单被按下了这么多问题。 CSS非常密集，我已经尝试找到罪魁祸首类但是有很多@media查询，我不完全确定是什么导致它。它似乎是一个填充问题，因为没有任何导航丢弃元素具有边距规格。有人想看看吗？

enter image description here

以下是所有CSS：

#nav ul li {
	font-size: 20px;
	line-height: 20px;
	font-weight: 300;
	text-transform: capitalize;
	margin: 0 0 3px;
	position: relative;
}

#nav ul li:hover > a {
	color: #6c8845;
}

#nav ul li:hover .drop {
	display: block;
}

#nav ul a {
	color: #fff;
	display: block;
	padding: 11px 26px;
}

#nav .drop {
	display: none;
}

#nav .drop ul {
	background: #272526;
}

#nav .drop ul li {
	margin: 0 0 -3px;
}

#nav .drop ul a {
	padding: 14px;
	padding-left: 61px;
}

@media (min-width: 768px) and (min-width: 1024px)
#nav .drop {
		-webkit-transition: visibility .3s ease-in-out, opacity .3s ease-in-out;
		transition: visibility .3s ease-in-out, opacity .3s ease-in-out;
		display: block;
		position: absolute;
		left: 0;
		top: 100%;
		width: 200px;
		z-index: 9;
		visibility: hidden;
		opacity: 0;
		text-align: left;
		padding: 50px 0 0;
	}

	.fixed-position #nav .drop {
		padding: 32px 0 0;
	}

	#nav .drop ul {
		background: #322f31;
	}

	#nav .drop ul li {
		display: block;
		margin: 0;
	}

	#nav .drop ul a {
		color: #fff;
		padding: 18px;
		position: relative;
	}

	#nav .drop ul a:hover {
		background: #6c8845;
		color: #fff;
		box-shadow: 0 11px 14px -8px rgba(0, 0, 0, .4) inset;
	}

	#nav .drop ul a:hover:before {
		opacity: 1;
	}

	#nav .drop ul a:before {
		-webkit-transition: opacity .3s ease-in-out;
		transition: opacity .3s ease-in-out;
		height: 0;
		width: 0;
		border-bottom: 9.5px solid transparent;
		border-left: 9px solid #c4c9ce;
		border-top: 9.5px solid transparent;
		content: "";
		position: absolute;
		left: 0;
		top: 50%;
		-webkit-transform: translateY(-50%);
		-ms-transform: translateY(-50%);
		transform: translateY(-50%);
		opacity: 0;
	}