Drop Down: Step 12

XHTML

Display Picture Make Text Link Make Image Link Basic Text Attributes Make a List Easy Back Button HEX Colours

CSS

Font/Colour Attributes Roll Over-text Roll Over-image Borders Float Margins Padding Backgrounds

Other Useful Tips

Add to Search Engine Terms

Drop Down: Step 12

This last step involves adding two elements that will fix internet explorer errors:

JavaScript that will fix the IE6 problem (the menu not coming down).
One more Style Rule that will fix the IE7 problem (the menu sticking out, instead of retracting)

IE6 fix

Remember how you added the CSS file to the <head> of your page? Like this:

We are going to do something similar with the JavaScript file. Add this to the <head>:

The part that says src="drop_down.js" is referring to the JavaScript file. Now, open up a new file in note pad (new JavaScript file if it’s Dreamweaver). Copy and paste this code:

sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

The only thing that you’re going to want to change is the part in red. Make sure it’s the same as the name you gave your <ul>.

you must be sure that this piece of JavaScript uses the same name as well. Now that you’ve done this, if it’s note pad, go to FILE, SAVE AS, then type drop_down.js and save it. In Dreamweaver of course, you won’t require the .js because you opened a new JavaScript document, it knows already. Other than that, just make sure that your JavaScript file is referred to properly in your <head> tag.

IE7 fix

For the internet explorer 7 menu stick problem, all you have to do is add this Style Rule to you style sheet file:

nav li:hover, nav li.hover {
position: static;
}

Congratulations! Your drop down menu should work just like mine.

<<PREVIOUS |