下拉导航栏覆盖在菜单下方

Question

我的编码有两个问题。

1. 当我设置Header ul的背景颜色时，它仅更改前ul个内容的背景 不适用于其他所有内容。

enter image description here

1. 当我将鼠标悬停在下拉菜单中时，下拉列表显示在上一个下一个菜单下

enter image description here

body{
	margin: 0px;
	padding: 0px;
}

/*############### NAVIGATION BAR ###############*/

header{
	background: #222222;
	height: 60px;
	font-family: 'Carter One', cursive;
}

header *{
	color: white;
}

header #navbar{
	position: fixed;
	top: 0;
	width: 100%;
	display: block;
	transition: top 0.3s;
}

header .logo{
	float: left;
	height: inherit;
	margin-left: 2em;
}

header .logo-text{
	margin:12px;
	font-size: 1.4em;
}

header .logo-text span{
	color: aquamarine;
}

header ul{
	float: right;
	margin:0px;
	padding: 0px;
	height: inherit;
	list-style: none;
}

header ul li{
	float: left;
	position: relative;
}

header ul li ul{
	position: absolute;
	top: 60px;
	width: auto;
	display: none;
}

header ul li:hover ul{
	display: block;
}

header ul li ul li{
	width: 100%;  
}

header ul li ul li a{
	/*padding: 20px;*/
}

header ul li ul li a{
	background-color: grey;
}

header ul li a{
	display: block;
	padding: 17px;
	padding-left: 20px;
	font-size: 1em;
	text-decoration: none;
}

header ul li a:hover{
	background: #006669;
	transition: 0.5s;
}

header .toggle-menu{
	display: none;
}

.fa-leanpub, .fa-home, .fa-lightbulb, 
.fa-youtube, .fa-envelope, .fa-user{
	color: aquamarine;
	font-size: 1.3em;
}

/*############### RESPONSIVE NAVIGATION BAR ###############*/

@media only screen and (max-width: 1200px){
	
	header ul{
		width: 100%;
		background-color: #0E94A0 !important;
	}

	header ul li{
		width: 100%;
	}

}

	<!-- FontAwesome -->
	<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">
	<!-- Google Fonts -->
	<link href="https://fonts.googleapis.com/css2?family=Carter+One&display=swap" rel="stylesheet">


	<header id="navbar">
		<div class="logo">
			<h1 class="logo-text"><span>NAV</span>BAR</h1>
		</div>
		<i class="fas fa-bars toggle-menu"></i> 
		<ul>
			<li><a href=""><i class="fas fa-home"></i>&nbsp Home</a></li>
			<li>
				<a href="#"><i class="fab fa-leanpub"></i>&nbsp Soft  &nbsp<i class="fas fa-angle-down"></i></a>
				<ul>
					<li><a href="">Tally</a></li>
					<li><a href="">Excel</a></li>				
					<li><a href="">Word</a></li>				
					<li><a href="">Powerpoint</a></li>				
				</ul>
			</li>
			<li><a href=""><i class="fas fa-lightbulb"></i>&nbspTricks</a></li>
			<li><a href=""><i class="fab fa-youtube"></i>&nbsp Videos</a></li>
			<li><a href=""><i class="fas fa-envelope"></i>&nbsp About-Us</a></li>
			<li><a href=""><i class="fas fa-user"></i>&nbsp Contact-Us</a></li>
		</ul>
	</header>