troubleshooting Question

CCS and Javascript

Avatar of mknight9
mknight9 asked on
31 Comments1 Solution979 ViewsLast Modified:
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 type="text/javascript">

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

<!-- Menu start -->            
<div id="cont">
               <p id="menu18" class="menuHeadOut" onclick="SwitchMenu('sub18')"
onmouseout="ChangeClass('menu18','menuHeadOut')"> &nbsp;Why Choose Us</p>
               <div id="sub18" style="display:none;"> </div>
               <p id="menu3" class="menuOutopen" onclick="SwitchMenu('sub3')"
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')"
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')"
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')"
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')"
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')"
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')"
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>
               <p class="menuOut" id="menu1" onclick="SwitchMenu('sub1')"
onmouseout="ChangeClass('menu1','menuOut')">&nbsp;<a href="WhyUs.shtml">Mortgages </a></p>
               <div class="submenu" id="sub1" style="display:none;">
• <a href="" title="First Time Buying">First Time Buying</a><br/>
• <a href="" title="Home Moving">Home Moving</a><br/>
• <a href="" title="Remortgaging">Remortgaging</a><br/>
• <a href="" title="Right to Buy">Right to Buy</a><br/>
• <a href="" title="Adverse">Adverse</a><br/>
• <a href="" title="Self Certification">Self Certification</a><br/>
• <a href="" title="Buying to Let">Buying to Let</a><br/>
• <a href="" title="Self Build">Utilities</a><br/>
               <p id="menu2" class="menuOut" onclick="SwitchMenu('sub2')"
               <div class="submenu" id="sub2" style="display:none;">
• <a href="" title="CGI scripts">Accident, Sickness &amp;&nbsp;&nbsp;Unemployment</a><br/>
• <a href="" title="DHTML scripts & Javascripts">Life Cover</a><br/>
• <a href="" title="Buildings">Buildings &amp; Contents</a> </div>
               <p align="left" class="menuOut" id="menu5" onclick="SwitchMenu('sub5')"
onmouseout="ChangeClass('menu5','menuOut')">&nbsp; Useful Information </p>
               <div class="submenu" id="sub5" style="display:none;">
• <a href="" title="Business plan">Useful Links</a><br/>
• <a href="" title="Marketing plan">Jargon Explained</a><br/>
• <a href="" title="Financial plan">FSA Stuff</a><br/>
               <p id="menu6" class="menuOut" onclick="SwitchMenu('sub6')"
onmouseout="ChangeClass('menu6','menuOut')">&nbsp; Applying Online </p>
               <div class="submenu" id="sub6" style="display:none;">
• <a href="" title="Business plan">First Time Buying</a><br/>
• <a href="" title="Marketing plan">Moving House</a><br/>
• <a href="" title="Financial plan">Remortgaging</a><br/>
• <a href="" title="Financial plan">Right to Buy</a><br/>
• <a href="" title="Financial plan">Adverse</a><br/>
• <a href="" title="Financial plan">Self Certification</a><br/>
• <a href="" title="Financial plan">Buying to Let</a><br/>
• <a href="" title="Financial plan">Self Building</a><br/>
               <!-- Menu end -->
Join the community to see this answer!
Join our exclusive community to see this answer & millions of others.
Unlock 1 Answer and 31 Comments.
Join the Community
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 31 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros