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...
<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>
.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
