Avatar of mknight9
mknight9 asked on

CCS and Javascript

Hi
Hope someone can help.
I have a Menu using CSS and Javascript. The menu opens when you click on the head which presents the links.
I want the head as a link on some which will have no menu but each time I create it as a link it messes with the 'css rollover' colours of the text.

With no link on the head text, the text is governed by the css, but when its a link it becomes unrulie and starts to adopt the general. a.hover etc I have tried <a class="navlink" href="page3.htm">
a:link.navlink { color:#0000cc }
a:visited.navlink { color:#9900cc }
a:hover.navlink { color:#990000 }
But then the text does not rollover until you hover over the text instead of the CSS Box.

I will include what I think is required but if more is needed please let me know. Hope this makes sense.

Thank You Thank You.

Here's the Java
</script>
<script type="text/javascript">

function SwitchMenu(obj){
      if(document.getElementById){
      var el = document.getElementById(obj);
      var ar = document.getElementById("cont").getElementsByTagName("DIV");
            if(el.style.display == "none"){
                  for (var i=0; i<ar.length; i++){
                        ar[i].style.display = "none";
                  }
                  el.style.display = "block";
            }else{
                  el.style.display = "none";
            }
      }
}
function ChangeClass(menu, newClass) {
       if (document.getElementById) {
             document.getElementById(menu).className = newClass;
       }
}
document.onselectstart = new Function("return true");
</script>




<!-- Menu start -->            
<div id="cont">
               <p id="menu18" class="menuHeadOut" onclick="SwitchMenu('sub18')"
onmouseover="ChangeClass('menu18','menuHeadOver')"
onmouseout="ChangeClass('menu18','menuHeadOut')"> &nbsp;Why Choose Us</p>
               <div id="sub18" style="display:none;"> </div>
               <p id="menu3" class="menuOutopen" onclick="SwitchMenu('sub3')"
onmouseover="ChangeClass('menu3','menuOveropen')"
onmouseout="ChangeClass('menu3','menuOutopen')"><a href="whyus.shtml">&nbsp;</a><a href="Our-People.shtml">&nbsp;Our People</a></p>
               <div id="sub3" style="display:none;"> </div>
               <p id="menu11" class="menuOutopen" onclick="SwitchMenu('sub11')"
onmouseover="ChangeClass('menu11','menuOveropen')"
onmouseout="ChangeClass('menu11','menuOutopen')">&nbsp;&nbsp;<a href="Our%20Experience.shrml">Our Experience</a></p>
               <div id="sub11" style="display:none;"> </div>
               <p id="menu19" class="menuHeadOut" onclick="SwitchMenu('sub19')"
onmouseover="ChangeClass('menu19','menuHeadOver')"
onmouseout="ChangeClass('menu19','menuHeadOut')"> <a href="Property-Strategy.shtml">&nbsp;Property Strategy</a></p>
               <div id="sub19" style="display:none;"> </div>
               <p id="menu12" class="menuOutopen" onclick="SwitchMenu('sub12')"
onmouseover="ChangeClass('menu12','menuOveropen')"
onmouseout="ChangeClass('menu12','menuOutopen')">&nbsp;&nbsp;<a href="Buying-Off-Plan.shtml">Buying Off Plan</a></p>
               <div id="sub12" style="display:none;"> </div>
               <p id="menu13" class="menuOutopen" onclick="SwitchMenu('sub13')"
onmouseover="ChangeClass('menu13','menuOveropen')"
onmouseout="ChangeClass('menu13','menuOutopen')"><a href="Global-Approach.shtml">&nbsp;&nbsp;A Global Approach</a></p>
               <div id="sub13" style="display:none;"> </div>
               <p id="menu14" class="menuOutopen" onclick="SwitchMenu('sub14')"
onmouseover="ChangeClass('menu14','menuOveropen')"
onmouseout="ChangeClass('menu14','menuOutopen')"><a href="Developments-Quality.shtml">&nbsp;&nbsp;Developements of Quality</a></p>
               <div id="sub14" style="display:none;"> </div>
               <p id="menu15" class="menuOutopen" onclick="SwitchMenu('sub15')"
onmouseover="ChangeClass('menu15','menuOveropen')"
onmouseout="ChangeClass('menu15','menuOutopen')">&nbsp;&nbsp;<a href="Balanced-Portfolio.shtml">Building a Balanced Portfolio</a> </p>
               <div id="sub15" style="display:none;"> </div>
               <p id="menu16" class="menuHeadOut" onclick="SwitchMenu('sub16')"
onmouseover="ChangeClass('menu16','menuHeadOver')" o
nmouseout="ChangeClass('menu16','menuHeadOut')"> <a href="The-Property.shtml">The Property</a></p>
               <div id="sub16" style="display:none;"> </div>
               <p id="menu17" class="menuOutopen" onclick="SwitchMenu('sub17')" onmouseover="ChangeClass('menu17','menuOveropen')" onmouseout="ChangeClass('menu17','menuOutopen')">&nbsp;&nbsp;UK Property </p>
               <br/>
               <p class="menuOut" id="menu1" onclick="SwitchMenu('sub1')"
onmouseover="ChangeClass('menu1','menuOver')"
onmouseout="ChangeClass('menu1','menuOut')">&nbsp;<a href="WhyUs.shtml">Mortgages </a></p>
               <div class="submenu" id="sub1" style="display:none;">
• <a href="http://simplythebest.net/shareware/business/" title="First Time Buying">First Time Buying</a><br/>
• <a href="http://simplythebest.net/shareware/educational/" title="Home Moving">Home Moving</a><br/>
• <a href="http://simplythebest.net/games/" title="Remortgaging">Remortgaging</a><br/>
• <a href="http://simplythebest.net/shareware/graphics/" title="Right to Buy">Right to Buy</a><br/>
• <a href="http://simplythebest.net/shareware/hobby/" title="Adverse">Adverse</a><br/>
• <a href="http://simplythebest.net/shareware/music/" title="Self Certification">Self Certification</a><br/>
• <a href="http://simplythebest.net/shareware/programming/" title="Buying to Let">Buying to Let</a><br/>
• <a href="http://simplythebest.net/shareware/utilities/" title="Self Build">Utilities</a><br/>
               </div>
               <p id="menu2" class="menuOut" onclick="SwitchMenu('sub2')"
onmouseover="ChangeClass('menu2','menuOver')"
onmouseout="ChangeClass('menu2','menuOut')">&nbsp;&nbsp;Insurance</p>
               <div class="submenu" id="sub2" style="display:none;">
• <a href="http://simplythebest.net/cgiscripts/" title="CGI scripts">Accident, Sickness &amp;&nbsp;&nbsp;Unemployment</a><br/>
• <a href="http://simplythebest.net/scripts/" title="DHTML scripts & Javascripts">Life Cover</a><br/>
• <a href="http://simplythebest.net/scripts/" title="Buildings">Buildings &amp; Contents</a> </div>
               <p align="left" class="menuOut" id="menu5" onclick="SwitchMenu('sub5')"
onmouseover="ChangeClass('menu5','menuOver')"
onmouseout="ChangeClass('menu5','menuOut')">&nbsp; Useful Information </p>
               <div class="submenu" id="sub5" style="display:none;">
• <a href="http://planmagic.com/business_planning.html" title="Business plan">Useful Links</a><br/>
• <a href="http://planmagic.com/marketing_planning.html" title="Marketing plan">Jargon Explained</a><br/>
• <a href="http://planmagic.com/financial_planning.html" title="Financial plan">FSA Stuff</a><br/>
               </div>
               <p id="menu6" class="menuOut" onclick="SwitchMenu('sub6')"
onmouseover="ChangeClass('menu6','menuOver')"
onmouseout="ChangeClass('menu6','menuOut')">&nbsp; Applying Online </p>
               <div class="submenu" id="sub6" style="display:none;">
• <a href="http://planmagic.com/business_planning.html" title="Business plan">First Time Buying</a><br/>
• <a href="http://planmagic.com/marketing_planning.html" title="Marketing plan">Moving House</a><br/>
• <a href="http://planmagic.com/financial_planning.html" title="Financial plan">Remortgaging</a><br/>
• <a href="http://planmagic.com/financial_planning.html" title="Financial plan">Right to Buy</a><br/>
• <a href="http://planmagic.com/financial_planning.html" title="Financial plan">Adverse</a><br/>
• <a href="http://planmagic.com/financial_planning.html" title="Financial plan">Self Certification</a><br/>
• <a href="http://planmagic.com/financial_planning.html" title="Financial plan">Buying to Let</a><br/>
• <a href="http://planmagic.com/financial_planning.html" title="Financial plan">Self Building</a><br/>
               </div>
               <!-- Menu end -->
CSS

Avatar of undefined
Last Comment
seanpowell

8/22/2022 - Mon
seanpowell

There's not enough there to give you a definitive answer.
Can you either provide a link to the page online or the complete page here?

Thanks,
Sean
ASKER
mknight9

Hello Sean
I had a feeling I'd mess the question up.

Here is a link to the page  

http://www.ukmhl.com/New%20Design/Prop%20v4.shtml

On the menu on the left you have 'Why Choose Us' which is not currently a link. This is the preferred behaviour.
Below that is ' Property Strategy' which is a link but is behaving like a regular link. I could change the properties for links but this needs to be seperate to the rest of the links on the page.

Thanks
Ian
seanpowell

I'm confused...

>>On the menu on the left you have 'Why Choose Us' which is not currently a link.
You have the cursor set to pointer, so even though there's no link in the code - it is behaving like a link, which is confusing. So this really shouldn't be the preffered behaviour.

>>Below that is ' Property Strategy' which is a link but is behaving like a regular link.
I don't know what you mean by "regular link"

The way the navigation is set up, it appears that the blue bars are the main headings for the links below it, but in some cases the blue bars are links, and in others they're not. (And then in a third case, the blue bar is not a link, but opens a secondary menu that contains links.)

Perhaps you could describe exactly how the navigation is supposed to look/function, at the moment I'm having difficulty following what the desired effect is supposed to be...

Thanks,
Sean
Experts Exchange is like having an extremely knowledgeable team sitting and waiting for your call. Couldn't do my job half as well as I do without it!
James Murphy
ASKER
mknight9

Hi Sean
Sorry about the confusion.

I have molested the original use of the navigation. Originally it was how you see it in the third case [ You said 'And then in a third case, the blue bar is not a link, but opens a secondary menu that contains links'.]

When I speak of the desired behaviour I am speaking of the colour change to the text.
The 'Why Choose Us' text rollsover from white to blue, whereas the  ' Property Strategy' text is using default colours i.e. purple for visited link. I don't want that, I want it to appear just as the 'Why Choose Us'.
I do not want a visited colour I want the links to be White with a blue box and then Blue with white box on rollover.

Hope this defines my query.

If you can solve this for me I will up my points to you.

Ian
"Learning As I Go"
seanpowell

Okay - now I understand :-)

Give me a moment...
seanpowell

Okay...

Just add the following 2 classes to your stylesheet. That should do it :-)

.menuHeadOut a {
      color:#FFFFFF;
      background-color: #6495ED;
}

.menuHeadOver a {
      background-color: #FFFFFF;
      color: #000066;
}
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
seanpowell

And you should probably do the same for the nested menus for consistency. (Since "Mortgages" is a link, it shows differently at the moment.)
This will correct it:

.menuOut a {
      color:#FFFFFF;
      background-color: #6495ED;
}
.menuOver a {
      color:#000063;
      background-color: #FFFFFF;
}
ASKER
mknight9

Those classes are already included within the Style sheet as seen below. They are as they are on the page
 http://www.ukmhl.com/New%20Design/Prop%20v4.shtml

.menuHeadOut {
      cursor:pointer;
      margin:1px 0px;
      color:#FFFFFF;
      width:152px;
      padding:4px 10px 4px 5px;
      text-align:left;
      font-family:arial;
      font-weight:bold;
      font-size: 11px;
      background-color: #6495ED;
      clear: both;
      border-top: 1px none #000063;
      border-right: 1px none #000063;
      border-bottom: 1px solid #000063;
      border-left: 1px none #000063;
}
.menuHeadOver {
      cursor:pointer;
      margin:1px 0px;
      width:152px;
      padding:4px 10px 4px 5px;
      text-align:left;
      font-family:arial;
      font-weight:bold;
      font-size: 11px;
      background-color: #FFFFFF;
      color: #000066;
      border-top-width: 1px;
      border-right-width: 1px;
      border-bottom-width: 1px;
      border-left-width: 1px;
      border-bottom-style: solid;
      border-top-color: #000063;
      border-right-color: #000063;
      border-bottom-color: #000063;
      border-left-color: #000063;
.menuOut {
      cursor:pointer;
      color:#FFFFFF;
      width:122px;
      padding:2px 2px 2px 4px;
      text-align:left;
      font-family:arial;
      font-weight:normal;
      font-size: 11px;
      border-top: 1px none #003063;
      border-right: 1px none #003063;
      border-bottom: 1px solid #003063;
      border-left: 1px none #003063;
      background-color: #6495ED;
      margin-left: 39px;
      margin-top: 1px;
      margin-right: 0px;
      margin-bottom: 0px;
}
.menuOver {
      cursor:pointer;
      margin:1px 0px 0px 39px;
      color:#000063;
      width:122px;
      padding:2px 2px 2px 4px;
      text-align:left;
      font-family:arial;
      font-weight:normal;
      font-size: 11px;
      border-top: 1px #000063;
      border-right: 1px #000063;
      border-bottom: 1px solid #000063;
      border-left: 1px #000063;
      background-color: #FFFFFF;
}
seanpowell

No - they're different.

menuHeadOut a

not just

menuHeadOut
All of life is about relationships, and EE has made a viirtual community a real community. It lifts everyone's boat
William Peck
ASKER CERTIFIED SOLUTION
seanpowell

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
See how we're fighting big data
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
ASKER
mknight9

Thanks for all your help. I was going to increase the points, but I did not know how lmao. 500 points aint bad though. Worth every penny/point!

Thank you
seanpowell

Yes - that's the max. Not to worry though - I'm glad I was able to help out.

And thanks :-)
ASKER
mknight9

Take a look, if you at all interested. : )

http://www.ukmhl.com/New%20Design/Prop%20v4.shtml

Ian
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
seanpowell

That's the ticket.

And now I'm getting homesick :-(
ASKER
mknight9

You've plucked my curiosty. The staff reckon if its the images that make you homesick you must have the most perfect home. Sexy Woman, Designer Furniture, Wine & Dining and Sailing which must equal a lake. Unless you've been to the home page and your from Nottingham.

If the latter is the case you aint missing much but the wind and the ding dong of the new trams lol.

Be well

Ian
seanpowell

Very funny ;-)

I was born here (Toronto, Canada) but grew up in London - and 30 years later find myself running a web design agency back in Toronto.

They say home is where the heart is, and I just want to come home, that's all.
Your help has saved me hundreds of hours of internet surfing.
fblack61
ASKER
mknight9

In that case we'll have to house swop for a couple of weeks. Its funny because all me and my good lady want to do is visit Canada. (The grass is greener and all that, who knows) If that idea does not apeal to you, fancy sponsoring me with a job. I have plenty of other skills under my hat, css not yet being one of them. LMAO.

Thanks for all your help.

seanpowell

No - you sponsor me first, and then we'll talk :-)

>>Its funny because all me and my good lady want to do is visit Canada.
And all me and my good lady and two adorable children want to do is go back there.

Hmmm - stalemate I guess :-)
ASKER
mknight9

I could keep up the banter, but i'm not sure you'd want that so I say , Good Luck in getting a sponsor haha, my house is open to visitors and I've appreciated your help.

All the best to you and your good lady and adorable children.

Kind Regards

Ian Hill

P.S. May I have a look at your companies website.
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
seanpowell

Of course - just click on my member name...
ASKER
mknight9

Blast I just realised something outta place on the menu and would like to reopen this query with you. Though I'm not sure about the points.

The page http://www.ukmhl.com/New%20Design/Prop%20v4.shtml

The menu from 'Why Choose Us' to 'UK Property' are now all links on my local drive but its only the text thats clickable compared to the menu from 'Mortgages' to 'Applying Online' (which are not links by the way just access points to drop down the extended menu.).

Confusing.

The question is can I make the whole css box from 'Why Choose Us' to 'UK Property' clickable for the link instead of it only being on the text.

God I hope this make sense.

Ian

(I'm off home now and will pick these up in the morning, thanks)
seanpowell

I don't get that behaviour Ian - the entire menu item is clickable. Which browser are you using?
I started with Experts Exchange in 2004 and it's been a mainstay of my professional computing life since. It helped me launch a career as a programmer / Oracle data analyst
William Peck
ASKER
mknight9

Hi Sean
I am using IE6. (Lets call them 1 ['Why Choose Us' to 'UK Property'] and 2 ['Mortgages' to 'Applying Online'])
1 appears to be clickable with the hand showing itself, but you can't actually click through to that page unless you hover and click the text. Whereas on the lower menu  you can click anywhere to make the menu expand. I'd like to be able to click anywhere on 1 to ge to the next page.
seanpowell

I'm sorry Ian, I don't follow you.

Currently, "Why Choose Us" is not a link to anywhere, whereas "Our People" is. Clicking on the latter takes you directly to the page.

So I don't know what to tell you...
ASKER
mknight9

Sorry to have wasted your time so far Sean.

'Our People' is a link with a css box. The only way you can get to the page it links to is by clicking the text and not the css box.
'Mortgages'  is only access to the expanding menu but you can click anywhere on the css box to get the menu to expand.

I want to be able to click anywhere on the css box and it actively be the link and not just the text as the link.
css box = link    not     text=link

Cheers

By the way if you continue to spend time on this I will be opening another question for you to pick up on and grab the points. Hows 250 sound?
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
seanpowell

Light goes on - loud cheers heard in the back hallway....

Sorry Ian - I understand now. Let me look at the CSS again :-)
seanpowell

Question - how many pages have you built so far...
ASKER
mknight9

I was on the valium for while there stressing how I was going to get my thoughts across.  haha

One template which will cover the majority of the site, but its in early stages anyway.

Experts Exchange has (a) saved my job multiple times, (b) saved me hours, days, and even weeks of work, and often (c) makes me look like a superhero! This place is MAGIC!
Walt Forbes
seanpowell

So - here's the deal....just because of where you get to live :-)

This is your new navigation:

         <td width="168">

         <div id="navcontainer">
         <ul id="navlist">
           <li class="nolink">Why Choose Us</li>
           <li class="indent"><a href="Our-People.shtml">Our People</a></li>
           <li class="indent"><a href="Our%20Experience.shrml">Our Experience</a></li>
           <li><a href="Property-Strategy.shtml">Property Strategy</a></li>
           <li class="indent"><a href="Buying-Off-Plan.shtml">Buying Off Plan</a></li>
           <li class="indent"><a href="Global-Approach.shtml">A Global Approach</a></li>
           <li class="indent"><a href="Developments-Quality.shtml">Developements of Quality</a></li>
           <li class="indent"><a href="Balanced-Portfolio.shtml">Building a Balanced Portfolio</a></li>
           <li><a href="The-Property.shtml">The Property</a></li>
           <li class="indent"><a href="#">UK Property</a></li>
         </ul>
         </div>

         <br>

         <!-- Menu start -->
         <div id="cont">

           <p id="menu1" class="menuOut" onclick="SwitchMenu('sub1')" onmouseover="ChangeClass('menu1','menuOver')" onmouseout="ChangeClass('menu1','menuOut')">&nbsp;&nbsp;Mortgages </p>
           <div class="submenu" id="sub1" style="display:none;">
           • <a href="http://simplythebest.net/shareware/business/" title="First Time Buying">First Time Buying</a><br/>
           • <a href="http://simplythebest.net/shareware/educational/" title="Home Moving">Home Moving</a><br/>
           • <a href="http://simplythebest.net/games/" title="Remortgaging">Remortgaging</a><br/>
           • <a href="http://simplythebest.net/shareware/graphics/" title="Right to Buy">Right to Buy</a><br/>
           • <a href="http://simplythebest.net/shareware/hobby/" title="Adverse">Adverse</a><br/>
           • <a href="http://simplythebest.net/shareware/music/" title="Self Certification">Self Certification</a><br/>
           • <a href="http://simplythebest.net/shareware/programming/" title="Buying to Let">Buying to Let</a><br/>
           • <a href="http://simplythebest.net/shareware/utilities/" title="Self Build">Utilities</a><br/>
           </div>

           <p id="menu2" class="menuOut" onclick="SwitchMenu('sub2')" onmouseover="ChangeClass('menu2','menuOver')" onmouseout="ChangeClass('menu2','menuOut')">&nbsp;&nbsp;Insurance</p>
           <div class="submenu" id="sub2" style="display:none;"> • <a href="http://simplythebest.net/cgiscripts/" title="CGI scripts">Accident, Sickness &amp;&nbsp;&nbsp;Unemployment</a><br/>
           • <a href="http://simplythebest.net/scripts/" title="DHTML scripts & Javascripts">Life Cover</a><br/>
           • <a href="http://simplythebest.net/scripts/" title="Buildings">Buildings &amp; Contents</a> </div>

           <p id="menu5" class="menuOut" onclick="SwitchMenu('sub5')" onmouseover="ChangeClass('menu5','menuOver')" onmouseout="ChangeClass('menu5','menuOut')">&nbsp; Useful Information </p>
           <div class="submenu" id="sub5" style="display:none;"> • <a href="http://planmagic.com/business_planning.html" title="Business plan">Useful Links</a><br/>
           • <a href="http://planmagic.com/marketing_planning.html" title="Marketing plan">Jargon Explained</a><br/>
           • <a href="http://planmagic.com/financial_planning.html" title="Financial plan">FSA Stuff</a><br/>
           </div>

           <p id="menu6" class="menuOut" onclick="SwitchMenu('sub6')" onmouseover="ChangeClass('menu6','menuOver')" onmouseout="ChangeClass('menu6','menuOut')">&nbsp; Applying Online </p>
           <div class="submenu" id="sub6" style="display:none;">
           • <a href="http://planmagic.com/business_planning.html" title="Business plan">First Time Buying</a><br/>
           • <a href="http://planmagic.com/marketing_planning.html" title="Marketing plan">Moving House</a><br/>
           • <a href="http://planmagic.com/financial_planning.html" title="Financial plan">Remortgaging</a><br/>
           • <a href="http://planmagic.com/financial_planning.html" title="Financial plan">Right to Buy</a><br/>
           • <a href="http://planmagic.com/financial_planning.html" title="Financial plan">Adverse</a><br/>
           • <a href="http://planmagic.com/financial_planning.html" title="Financial plan">Self Certification</a><br/>
           • <a href="http://planmagic.com/financial_planning.html" title="Financial plan">Buying to Let</a><br/>
           • <a href="http://planmagic.com/financial_planning.html" title="Financial plan">Self Building</a><br/>
           </div>

         <!-- Menu end -->
         </div></td>

And this is the revised CSS:

.content
{
      font-family: arial;
      font-size: 12px;
      color: #000066;
      background-position: left;
}

.members
{
      font-family: Arial, Helvetica, sans-serif;
      font-size: 11px;
      font-weight: normal;
      color: #FFFFFF;
}

.textfield
{
      font-family: Arial, Helvetica;
      font-size: 10px;
      border: 1px solid #999999;
      text-decoration: none;
      color: #514826;
}

.linksCenter
{
      font-family: Arial, Helvetica, sans-serif;
      font-size: 11px;
      font-weight: bold;
      color: #514826;
      text-align: left;
      letter-spacing: 0px;
}

.membersRight
{
      font-family: Arial, Helvetica, sans-serif;
      font-size: 11px;
      font-weight: normal;
      color: #000066;
      text-align: right;
}



#navcontainer
{
      width: 168px;
}

#navcontainer ul
{
      margin: 0;
      padding: 0;
      list-style-type: none;
      font-family: Arial, Helvetica, sans-serif;
      font-size:11px;
}



/* unlinked items */

#navcontainer ul li.nolink
{
      display: block;
      padding: 4px 7px;
      width: 154px;
      background-color: #6495ED;
      border-bottom: 1px solid #003063;
      font-weight:bold;
      color: #FFF;
}

/* blue linked items */

#navcontainer a
{
      display: block;
      padding: 4px 7px;
      width: 154px;
      background-color: #6495ED;
      border-bottom: 1px solid #003063;
      font-weight:bold;
}

#navcontainer a:link, #navlist a:visited
{
      color: #FFF;
      text-decoration: none;
}

#navcontainer a:hover
{
      background-color: #FFF;
      color: #006;
}



/* grey linked items */

#navcontainer .indent a
{
      display: block;
      padding: 4px 14px;
      width: 140px;
      background-color: #e7e7e7;
      border-bottom: 1px solid #003063;
      font-weight:normal;
}

#navcontainer .indent a:link, #navlist .indent a:visited
{
      color: #003063;
      text-decoration: none;
}

#navcontainer .indent a:hover
{
      background-color: #FFF;
      color: #000063;
}



/* SECONDARY NAVIGATION */
/* UNCHANGED */

.menuOut
{
      cursor:pointer;
      color:#FFFFFF;
      width:122px;
      padding:2px 2px 2px 4px;
      text-align:left;
      font-family:arial;
      font-weight:normal;
      font-size: 11px;
      border-top: 1px none #003063;
      border-right: 1px none #003063;
      border-bottom: 1px solid #003063;
      border-left: 1px none #003063;
      background-color: #6495ED;
      margin-left: 39px;
      margin-top: 1px;
      margin-right: 0px;
      margin-bottom: 0px;
}

.menuOut a
{
      color:#FFFFFF;
      background-color: #6495ED;
}

.menuOver
{
      cursor:pointer;
      margin:1px 0px 0px 39px;
      color:#000063;
      width:122px;
      padding:2px 2px 2px 4px;
      text-align:left;
      font-family:arial;
      font-weight:normal;
      font-size: 11px;
      border-top: 1px #000063;
      border-right: 1px #000063;
      border-bottom: 1px solid #000063;
      border-left: 1px #000063;
      background-color: #FFFFFF;
}

.menuOver a
{
      color:#000063;
      background-color: #FFFFFF;
}


.submenu
{
border-bottom: #000063 1px solid;  
padding: 2px 2px 2px 4px;
background-position: left 50%;
font-weight: normal;
font-size: 11px;
margin: 2px 0px 2px 39px;
width: 122px;
      color: #006;
font-family: arial;
background-color: #e7e7e7;

}

.submenu a
{
padding: 5px;
background-position: left 50%;
color: #000063;
border: none;
}

.submenu a:hover
{
color: #000066;
text-decoration: blink;
}


I didn't touch the bottom navigation, though it could be simplified into a bullted <li> list as per the new one.
You get to do that part if you so desire :-)
ASKER
mknight9

OH MY GOD!!!!!!!!!!!!!!!!!!!!

THANKYOU THANKYOU. YOU HAVE BEEN BRILLIANT THANKYOU

Would you like me to open another question for you. I OWE YOU POINTS.

THANKYOU

Just wish I could return the favour on a personal level rather than points.
 
Ian
seanpowell

That's okay Ian. It's not like I can actually do anything with them - they have no real value :-)

Just happy to help out one line of code at a time :-)

And thanks again,
Sean
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.