Solved

CCS and Javascript

Posted on 2004-03-22
31
899 Views
Last Modified: 2008-03-03
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 -->
0
Comment
Question by:mknight9
  • 18
  • 13
31 Comments
 
LVL 31

Expert Comment

by:seanpowell
ID: 10648228
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
0
 

Author Comment

by:mknight9
ID: 10648365
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
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 10648500
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
0
 

Author Comment

by:mknight9
ID: 10648923
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"
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 10649013
Okay - now I understand :-)

Give me a moment...
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 10649107
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;
}
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 10649169
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;
}
0
 

Author Comment

by:mknight9
ID: 10649264
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;
}
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 10649297
No - they're different.

menuHeadOut a

not just

menuHeadOut
0
 
LVL 31

Accepted Solution

by:
seanpowell earned 500 total points
ID: 10649307
menuHeadOut a

This means - any links inside of "menuHeadOut"
0
 

Author Comment

by:mknight9
ID: 10649453
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
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 10649514
Yes - that's the max. Not to worry though - I'm glad I was able to help out.

And thanks :-)
0
 

Author Comment

by:mknight9
ID: 10649528
Take a look, if you at all interested. : )

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

Ian
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 10649595
That's the ticket.

And now I'm getting homesick :-(
0
 

Author Comment

by:mknight9
ID: 10649824
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
0
Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

 
LVL 31

Expert Comment

by:seanpowell
ID: 10650267
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.
0
 

Author Comment

by:mknight9
ID: 10650346
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.

0
 
LVL 31

Expert Comment

by:seanpowell
ID: 10650461
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 :-)
0
 

Author Comment

by:mknight9
ID: 10650713
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.
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 10650753
Of course - just click on my member name...
0
 

Author Comment

by:mknight9
ID: 10650777
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)
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 10656397
I don't get that behaviour Ian - the entire menu item is clickable. Which browser are you using?
0
 

Author Comment

by:mknight9
ID: 10657021
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.
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 10657105
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...
0
 

Author Comment

by:mknight9
ID: 10657525
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?
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 10657569
Light goes on - loud cheers heard in the back hallway....

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

Expert Comment

by:seanpowell
ID: 10657637
Question - how many pages have you built so far...
0
 

Author Comment

by:mknight9
ID: 10657803
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.

0
 
LVL 31

Expert Comment

by:seanpowell
ID: 10658579
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 :-)
0
 

Author Comment

by:mknight9
ID: 10659066
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
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 10659137
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
0

Featured Post

Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

Join & Write a Comment

Suggested Solutions

Unordered lists (HTML ul tags) are very handy to create menus of all types, shapes and sizes.  All it takes is a little knowledge of CSS and the possibilities are endless. First off, you should know the general format for menus created using the …
As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …

706 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now