I have a CSS drop down menu and I want it so that when you hover over the drop down items the original main menu item changes back to the original color. How can I do this. At the moment when I hover over the top items the background color turn orange and the same when I then hover over a drop down item but the background color on the top item stays orange when it's supposed to go back to the original color...

Code:
<div id="navigation"><!-- Navigation Bar Start -->


	
    
    <div class="navMenu">
		<ul>
			<li id="left"><a href="index.html">Home</a>
				<ul>
					<li></li>
					<li></li>
				</ul>
			</li>
		</ul>
	</div>


	<div class="navMenu">
		<ul>
			<li id="middle"><a href="http://about.me/thomashochkins">About</a>
				<ul>
					<li></li>
					<li></li>
				</ul>
			</li>
		</ul>
	</div>


	<div class="navMenu">
		<ul>
			<li class="outer" id="middle"><a href="gallery.html">Gallery</a>
				<ul>
					<li class="inner" id="innermiddle"><a href="download.html">Download</a></li>
					<li class="inner" id="innermiddlebottom"><a href="photos.html">Photos</a></li>
				</ul>
			</li>
		</ul>
	</div>

	<div class="navMenu">
		<ul>
			<li id="middle"><a href="videos.html">Videos</a>
				<ul>
					<li></li>
					<li></li>
				</ul>
			</li>
		</ul>
	</div>


	<div class="navMenu">
		<ul>
			<li id="middle"><a href="contact.html">Contact</a>
				<ul>
					<li></li>
					<li></li>
				</ul>
			</li>
		</ul>
	</div>
    
    <div class="navMenu">
		<ul>
			<li id="right">
				<ul>
					<li></li>
					<li></li>
				</ul>
			</li>
		</ul>
	</div>
   <br class="clearFloat" />
</div>
Code:
.navMenu {
	margin-top:20px;
	margin-left:60px;
	margin-right:60px;
	padding:0;
}

.navMenu ul {
	margin:0;
	padding:0;
	line-height:40px;
}

.navMenu li {
	margin:0;
	padding:0;
	list-style:none;
	float:left;
	position:relative;
	background-color:#E8E8E8;
}


.navMenu .inner {
	background-color:#E8E8E8;
	display:block;
	width:200px;
}

.navMenu ul li a {
	text-align:center;
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	font-weight:bold;
	text-decoration:none;
	text-shadow:#FFF 2px 2px 3px;
	width:75px;
	height:40px;
	display:block;
	color:#464646;
}

.navMenu ul ul {
	position:absolute;
	visibility:hidden;
	top:20px;
}

.navMenu ul li:hover ul {
	visibility:visible;
	margin-top:20px;
}

.navMenu li:hover {
	background-color:#E56500;
}

.navMenu ul li:hover ul li a:hover {
	color:#FFF;
	text-shadow:none;
	text-decoration:none;
	width:193px;
	text-align:left;
}

.navMenu a:hover {
	color:#FFF;
	text-decoration:none;
	text-shadow:none;
}

.navMenu ul li:hover a {
	color:#FFF;
	text-shadow:none;
}

.navMenu ul li:hover li a {
	width:193px;
	color:#464646;
	border-bottom-left-radius:5px;
	border-bottom-right-radius:5px;
	text-shadow:#FFF 2px 2px 3px;
} 

.edge {
	background-color:#E56500;
	width:480px;
}

#right {
	-webkit-border-top-right-radius:5px;
	-webkit-border-bottom-right-radius:5px;
	-moz-border-top-right-radius:5px;
	-moz-border-bottom-right-radius:5px;
	border-top-right-radius:5px;
	border-bottom-right-radius:5px;
	border-right:1px solid #D5D5D5;
	border-top:1px solid #D5D5D5;
	border-bottom:1px solid #D5D5D5;
	width:300px;
	height:40px;
}

#left {
	-webkit-border-top-left-radius:5px;
	-webkit-border-bottom-left-radius:5px;
	-moz-border-top-left-radius:5px;
	-moz-border-bottom-left-radius:5px;
	border-top-left-radius:5px;
	border-bottom-left-radius:5px;
	border-left:1px solid #D5D5D5;
	border-top:1px solid #D5D5D5;
	border-bottom:1px solid #D5D5D5;
}

#middle {
	border-bottom:1px solid #D5D5D5;
	border-top:1px solid #D5D5D5;
}

#innermiddle {
	border-left:1px solid #D5D5D5;
	border-right:1px solid #D5D5D5;
	margin-left:-1px;
}

#innermiddlebottom {
	border-left:1px solid #D5D5D5;
	border-right:1px solid #D5D5D5;
	border-bottom:1px solid #D5D5D5;
	margin-left:-1px;
}

.navMenu .inner a {
	text-align:left;
	padding-left:7px;
}

#prices {
	border-bottom-left-radius:5px;
	border-bottom-right-radius:5px;
}

#right:hover {
	background-color:#E8E8E8;
}

.clearFloat {
	clear:both;
	margin:0;
	padding:0;
}
Thanks, Thomas