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>Thanks, ThomasCode:.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; }


Reply With Quote

Bookmarks