Hi guys new to these forums I usually find the answer but testing lots of solutions with no luck i decided to post my code on here and see if anyone can help me out. I can't get the drop down menu to work in IE6 heres my code:
Heres the javascript file ive linked to the html:
startlist = function() { if (document.all&&document.getElementById) { navRoot = document.getElementById("nav"); for(i=0; i<navRoot.childNodes[i]; if(node.nodeName=="li") { node.onmouseover=function(){ this.className+=" over"; } node.onmouseout=function(){ this.className=this.ClassName.replace>> (" over", ""); }}}} } window.onload=startList;
CSS nav file:
@charset "utf-8"; /* CSS Document */ ul { font-size:16px; list-style: none; /* this removes the list marker */ text-decoration:none; background-repeat:no-repeat; text-decoration: none; color:#FFF; margin:0px; padding-right:20px; padding-left:0px; padding-bottom:20px; padding-top:20px; } #nav{ background:url(bar.png); background-repeat:no-repeat; } ul a, ul a:visited { /* grouping these selectors makes sure that your links retain their button look even after being visited */ text-decoration: none; color:#FFF; } /* li has to be positioned relative and then the sub menu absolute to get the positioning right on the page the margin-right negative value removes the white space in the ul menu */ ul li { position:relative; background-repeat:no-repeat; display:inline; margin:0px; padding:0px; border-right:1px; } ul li a, ul li a:visited, ul li a:active{ color: #FFF; text-decoration:none; padding-right:10px; padding-top:8px; padding-left:10px; padding-bottom:10px; } /* Below keeps the button's hover colour on whilst you are hovering over the sub menu */ ul li:hover a { background:#F1FAFA; color:#06C; } /* the sub menu here is positioned absolute to the li menu button*/ ul li ul{ position:absolute; left:0px; display:none; color:#06C; background:#F1FAFA; background-repeat:no-repeat; text-align:left; padding-top:0px; padding-left:0px; padding-right:30px; line-height:20px; margin-top:8px; opacity:0.9; filter:alpha(opacity=90); /* for IE 8 or earlyier */ } * html ul li ul{ top:45px; } *+html ul li ul{ top:45px; } /* you display the li block so that it isn't displayed as inline on the screen */ ul li ul li{ padding-left:5px; display:block; margin-right:-10px; font-size:10px; opacity:1; /* opacity of li writing */ filter:alpha(opacity=100); } /* Changes each link color when hovering over individually */ ul li ul li:hover{ cursor:pointer; text-decoration:underline; color:#06C; } * html ul li ul a:hover{ cursor:pointer; text-decoration:underline; color:#06C; } *+html ul li ul a:hover{ cursor:pointer; text-decoration:underline; color:#06C; } /* Hover over the menu button to display the sub menu */ ul li:hover ul{ display:block; }
and finally the html nav menu code:
<ul id="nav"> <li><a href="index.html">Home</a></li> <li><a href="about_martin_evans_specialist_decorators.html">About</a></li> <li><a href="painters_and_decorators.html">Decorating</a><ul><li><a href="painters_and_decorators.html">Preparation</a></li><li><a href="painters_and_decorators.html">Planning</a></li><li><a href="painters_and_decorators.html">Painting</a></li><li><a href="painters_and_decorators.html">Paper Hanging</a></li><li><a href="ceramic_mosaic_tilers_tiling_cardiff.html">Professional Tilers</a></li></ul></li> <li><a href="specialist_decorators.html">Specialist </a><ul><li><a href="specialist_decorators.html">Architectural Plasterwork</a></li><li><a href="ceiling_roses_ornate_victorian_georgian_coving_cornice.html">Cornice & Coving</a></li><li><a href="specialist_decorators.html">Commercial</a></li><li><a href="specialist_decorators.html">Residential</a></li><li><a href="specialist_decorators.html">Restoration</a></li></ul></li> <li><a href="latest_painting_decorating_projects_cardiff.html">Latest Projects</a></li> <li><a href="architectural_plasterwork_ornate_plasterers_testimonials.html">Testimonials</a></li> <li><a href="plasterwork_painting_specialist_decorating_gallery.html">Gallery</a></li> <li><a href="contact_martin_evans_specialist_decorators.html">Contact</a></li> </ul>
Any help would be much appreciated.
Thanks,
Marty
Hi Marty, Everywhere you have
Hi Marty,
Everywhere you have li:hover in your stylesheet you will need to also have .over:hover
For example:
ul li:hover a{
becomes:
ul li:hover a, ul .over:hover a{
But seriously, IE6?
its like the oldest browser
its like the oldest browser ever i know but im building a website for a business and they work on machines that have ie6 which is really annoying since hardly anybody uses it anymore
hey tony thanks for the reply
hey tony thanks for the reply il get onto it straight
hi tony ive gt it to change
hi tony ive gt it to change the ul li color on hover using ul .over a:hover as ul .over:hover didnt work, and cant get it to display the sub menu. i use ul li:hover ul{display:block} an changed it to ul li .over:hover ul{display:block} but no luck. it doesnt seem to work at all with .over:hover just wonderin if you have any suggestions thanks for the help
ahh no worries ive managed to
ahh no worries ive managed to get it working through ul .over ul{display:block}. again thanks for the reply