Drop Down Menu Problem in IE

[VaporGlide]

Hi,

I've put in a drop down menu at www.positivelysandpoint.com which works fine in FF, but it slides under the next element (weather block) in IE. I forget how to get it to slide over the element so the drop down menus can be read.

Thanks in Advance

VaporGlide

[bluewalrus]

if your using suckerfish this is in there doesnt look like its being used in your code. http://alistapart.com/articles/dropdowns
"I am, as some might have guessed, talking about Internet Explorer users. The more you use and develop with browsers such as Mozilla the more you realize how pathetic Internet Explorer can be when it comes to web standards. The :hover pseudo class should work with any element, but in Internet Explorer it only works with links. So. What’s the use in a dropdown menu when it only works on -2.6% of browsers? Not much, to be honest. We need to apply a little bit more magic.
DOM-based scripting to the rescue

We’ve established IE’s lack of support for the :hover pseudo class, but by using the Document Object Model, we can attach mouseover and mouseout events to any element. This is good news for us because it means that with a simple snippet of JavaScript we can effectively patch IE’s :hover problems.

Because IE is blind we need to find another way to identify the properties of the :hover pseudo class. With JavaScript, we know that we can manipulate the className property of an element so what we are going to do first is alter the CSS:

li:hover ul{ display: block; }

becomes:

li:hover ul, li.over ul{ display: block; }

Now we can invoke the :hover CSS rules by adding the class over to the desired element. We also need a way to tell IE which of the UL elements on the page we actually want to be our dropdown menus. We can do this by giving an id to our root ul element:

<ul>

becomes:

<ul id="nav">

Now that we have a means of identifying the root ul element of our dropdown list, we can grab this element and loop through all of its child elements, attaching mouseover and mouseout events to all the li elements nested within it. And this is how it’s done:

startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = 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;

On page load, the startList function is invoked. The function determines if the browser is actually IE 5 or greater by checking for the existence of the document.all object and document.getElementById function. This is a bit of a crude way of doing it but it’s short and sweet — and since we are trying to make a compact solution, this will do. It then loops through, enabling mouseover and mouseout events which add and remove the over class from the className property of the element.

There you have it. If you got lost anywhere, have a look at a commented, bare-bones example in action."