How to do mouse hover

please i need help i am try to do mouse hover on my web site but i have a problem,when i hover my mouse on a li it affect the other but i cn't figure out the problem please this is my code sumome should help me out thanks.
<div id = "tutorials-header-list">
		   <ul id = "menu">
				<li><a href="#">Home</a></li>
				<li><a href="#">About-us</a></li>
				<li><a href="#">Library</a></li>
				<li><a href="#">grammar-rule</a></li>
				<li><a href="#">Online-Calculators</a></li>
			</ul>
			</div>
			
			<style>
			
			#menu{
			    height:50px;
				width:100%;
				background:black;
			}
			
			#menu li {
			   float:left;
			   display:inline-block;
			   margin-left:40px;
			}
			
			#tutorials-header-list #menu:hover  li{
			     width:120px;
				 height:50px;
			     background:white;
			
			}
			</style>