Drop Down Menu - Problem Opening in IE

[#tbone]

I have used the Suckerfish drop down menu and have run into a problem.

I found the sample code here.

Here is a simplified version of what my code looks like:

<style type="text/css">
 
    body {
    font-family: arial, helvetica, serif;
    }
 
    #nav, #nav ul { /* all lists */
        padding: 0;
        margin: 0;
        list-style: none;
        float : left;
        width : 6em;
 
    }
 
    #nav li { /* all list items */
    position : relative;
    float : left;
    line-height : 1em;
    margin-bottom : -1px;
    width: 10em;
    border: 1px solid #000000;        
    }
 
    #nav li ul { /* second-level lists */
    position : absolute;
    left: -999em;
    margin-left : 9.9em;
    margin-top : -1.05em;
 
    }
 
    #nav li ul ul { /* third-and-above-level lists */
        left: -999em;
    }
 
    #nav li a {
 
    display : block;
    color : black;
    text-decoration : none;
    background-color : #FFE8FF;
    padding : 0 0.5em;
    font-size: 10px;
    }
 
    #nav li a:hover {
        background-color : #FF99FF;
    }
 
    #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 { /* lists nested under hovered list items */
        left: auto;
    }
 
    #content {
        margin-left : 12em;
    }
 
 
</style>
<script type="text/javascript"><!--//--><![CDATA[//><!--
 
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);
 
//--><!]]>
</script>
 
<table align="left">
  <tr>
    <td>
  </tr>
  <tr>
    <td><ul id="nav">
        <li> <a href="javascript:gotoRootURL ()"><strong>Category</strong></a>
          <ul>
            <li> <a href=""><strong>Petite Tennis Bracelets</strong></a>
              <ul>
                <li><a href="javascript:gotoRootURL( )"><strong>306</strong></a>
                  <ul><li><img src="/en/images/productshots/resized/306nav.jpg" alt="306" /></li></ul>
                </LI>
                <li><a href="javascript:gotoRootURL( )"><strong>1326</strong></a>
                  <ul><li><img src="/en/images/productshots/resized/1326nav.jpg" alt="1326" /></li></ul>
                </LI>
                <li><a href="javascript:gotoRootURL( )"><strong>1330</strong></a>
                  <ul><li><img src="/en/images/productshots/resized/1330nav.jpg" alt="1330" /></li></ul>
                </LI>
                <li><a href="javascript:gotoRootURL( )"><strong>1331</strong></a>
                  <ul><li><img src="/en/images/productshots/resized/1331nav.jpg" alt="1331" /></li></ul>
                </LI>
              </ul>
            </li>
            <li><a href="javascript:gotoRootURL( 'browser.asp?SKU=185&showcase=yes&Start=0' )"><strong>185</strong></a>
              <ul><li><img src="/en/images/productshots/resized/185nav.jpg" alt="185" /></li></ul>
            </LI>
          </ul>
        </li>
      </UL>
    </td>
  </tr>
</table>

Problem 1: is... so far in IE 6 (not able to test in other browsers, but it works in IE 7) when you hover over the "category", the drop down menu pops out to the right, which all works fine.

Then you move your mouse over the "sub 1" menu, which again is fine, until your try to move your mouse down to the "sub 2" menu and then the whole "sub" menu disappears completly.

Problem 2: Can anyone show me how to ensure that the drop down menu will adjust for the size of the page? For instance, when someone scrolls over a part of the menu that is taller or wider than there browser, how can I get the opening menu to stay within the browsers border and not go off-screen?

[FC Jamison]

Without loading this into a Web page, there are a couple of things it could be,

If there is a 1px space between the submenus, the menu will close when you roll over it.

The other common problem is te css for hovering.

As for menu overflow...there is really no foolproof way to do this. I would suggest having the browser check the width of the window vs. the position and width of the menu and reposition the submenus on overflow.

Your best bet is to design your site in such a way that this situation does not happen or happens only under certain conditions that can be easily avoided.