Menu amending issue

[charlie]

Nearly getting to the end of a site I'm doing

http://www.chant4.com/testsites/entwisles

They seem pretty happy with it and have suggested a few tweaks, most of which are straightforward.

However, they  have made a request of the menu and I can't see a way to do this without starting it all over again.

their request is:

When you choose a heading from the top menu it becomes shaded to show cursor is over the heading to then click on it to open the relevant information. Can the main heading option remain shaded when the sub-menu is displayed so that it is obvious which main heading was selected?

I think they may just mean a change in the font colour.


Can anyone see a way I can do this please.

example of one of the two tier codes follows:

<div id="menuholder">
<strong><a href="index.php">HOME</a></strong> | <strong><a href="patientinfo.php">PATIENT INFORMATION</a></strong> | <strong><a href="treatment.php">TREATMENT</a></strong> | <strong><a href="theteam.php">THE TEAM</a></strong> | <strong><a href="testimonials.php">TESTIMONIALS</a></strong> | <strong><a href="contactus.php">CONTACT US</a></strong> | <strong><a href="findus.php">FIND US</a></strong> | <strong><a href="referrals.php">REFERRALS</a></strong>

<div id="submenu">
<a href="whatisorthodontics.php">What is Orthodontics?</a> | <a href="whychooseus.php">Why Choose Us?</a> | <a href="adultsandchildren.php">Adults &amp; Children</a> | <a href="initialvisit.php">Initial Visit</a> | <a href="nhstreatment.php">NHS Treatment</a> | <a href="privatetreatment.php">Private Treatment</a> | <a href="clinictimes.php">Clinic Times</a> | <a href="faqs.php">FAQs</a> | <a href="casestudies.php">Case Studies</a></div>

</div>

and css follows:

#menuholder {width:940px;
padding-top:4px;
padding-bottom:4px;
background-color:#3a6278;
color:#ffffff;
letter-spacing:4px;
font-size:1em;
   font-family: Calibri, helvetica, verdana, arial,  sans-serif;
   background-image:url(images/navba.jpg);
   overflow: hidden;}
   
   
   
   #menuholder a {
   text-decoration:none;
   padding:0px;
   letter-spacing: 0px;
color:#ffffff;}

#menuholder a:visited {
   text-decoration:none;
   padding:0px;
   letter-spacing: 0px;
    color:#ffffff;}

#menuholder a:hover {
   text-decoration:none;
   padding:0px;
   letter-spacing: 0px;
color:#999999; }





#submenu {width:940px;
padding-top:5px;
padding-bottom:5px;
background-color:#3a6278;
color:#ffffff;
letter-spacing:0px;
font-size:0.8em;
   background-image:url(images/navba.jpg);
   overflow: hidden;}

all suggestions appreciated.

ta

[neal]

yeah, i assume that's what they mean too.

the simplest way would be to add a class to the selected parent nav and then just apply the colour change to that class.

[charlie]

actually .. don't think that will work .. in fact can't see a way of doing it without starting again. Mainly because it's not really a 2 tier menu but 2 seperate menus so if somepone clicks patient information for example and I set a class to change the colour of that text because it's current, as soon as they select one of the sub menu, it would then revert to its previous so not sure it can be done