6 replies [Last post]
sainty11cardiff
Offline
newbie
Last seen: 2 years 49 weeks ago
Timezone: GMT+1
Joined: 2011-10-06
Posts: 5
Points: 8

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&nbsp;Hanging</a></li><li><a href="ceramic_mosaic_tilers_tiling_cardiff.html">Professional&nbsp;Tilers</a></li></ul></li>
      <li><a href="specialist_decorators.html">Specialist&nbsp;</a><ul><li><a href="specialist_decorators.html">Architectural&nbsp;Plasterwork</a></li><li><a href="ceiling_roses_ornate_victorian_georgian_coving_cornice.html">Cornice&nbsp;&amp;&nbsp;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

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 2 hours 57 min ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5120
Points: 2717

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{

mihirc
mihirc's picture
Offline
Leader
Pune, Maharashtra, India
Last seen: 6 weeks 5 days ago
Pune, Maharashtra, India
Timezone: GMT+5.5
Joined: 2007-05-09
Posts: 728
Points: 204

But seriously, IE6?

Hello,
Why are you supporting that browser anyways?

http://ie6update.com/

Regards,
Mihir.

Proprietor - Thoughtfulviewfinder Services
Web Development | Design | Merchandise | Photography
My personal blog: MihirChhatre.com

sainty11cardiff
Offline
newbie
Last seen: 2 years 49 weeks ago
Timezone: GMT+1
Joined: 2011-10-06
Posts: 5
Points: 8

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

sainty11cardiff
Offline
newbie
Last seen: 2 years 49 weeks ago
Timezone: GMT+1
Joined: 2011-10-06
Posts: 5
Points: 8

hey tony thanks for the reply

hey tony thanks for the reply il get onto it straight

sainty11cardiff
Offline
newbie
Last seen: 2 years 49 weeks ago
Timezone: GMT+1
Joined: 2011-10-06
Posts: 5
Points: 8

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

sainty11cardiff
Offline
newbie
Last seen: 2 years 49 weeks ago
Timezone: GMT+1
Joined: 2011-10-06
Posts: 5
Points: 8

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