Dropdown Menu Problem IE

Click-dragging, Menu stays displayed

[Halp]

I created a simple drop down menu that displays 3 links. The menu is displayed when the user hovers over the object. The menu is hidden from view when the user moves his/her cursor out of the object area. The problem I am having is when you left click on the menu and drag the cursor out of the menu area. The menu remains displayed. This problem doesn't occur in Firefox. The page uses a small js script to extend compatibility to IE. I'm not sure if there is a problem with the CSS or if I need to add an event handler to the js script to tell it hide the links when the cursor is dragged out of the object area.

I created an example of my problem:
<ooops>

edit reason: see posts below, the advice is right, just post here.. it's OK really, even I posted links early on too :)

[edited by: SuzyUK at 10:51 pm (utc) on June 19, 2008]

[4css]

Hi Halp

Welcome to WebmasterWorld!

Please read the Forum charter [webmasterworld.com] which explains how to post your code for review as links aren't permitted for posting.

If you can still edit your post, please remove your link. Thanks :)

You are right, it could be a JaveaScript problem, however, you need to post the relevant code, and let us know the doctype that you are using as well.

[Halp]

Im sorry, I am unable to edit my post. You can delete this one and I will create another one later. Once again I am sorry for not reading the rules.

[4css]

Just post in this one. A mod will come along and delete your link. Just post your information code wise that you are having difficulty with.

btw, when I started here, I also posted a link, so don't worry about it. ;)

[Halp]

sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");

This is a portion of the script that I am using to extend compatibility to IE. Is there a way to include a click drag event handler that hides the hover?

#nav li {
float: left;
width: 201px;
height: 27px;
background-image: url(images/dropdown.gif)
}
#nav li ul {
position: absolute;
width: 165px;
left: -999em;
}
#nav li ul li{
width: 165px;
margin-left: 18px;
}
#nav li:hover ul {
left: auto;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
left: auto;
}

#nav li:hover ul, #nav li.sfhover ul {
left: auto;
}
.parent {
width: 165px;
height: 27px;
background-image: url(images/hover_bg.gif);
text-decoration: none;
color: #000000;
}
.parent:hover {
background-image:url(images/hover2_bg.gif);
}

Here is the portion of my CSS that handles the listed menu items. Since this problem only occurs in IE, I suspect that the solution may involve modifying the java script.