AJAX

Drop Down Menu - Problem Opening in IE

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

•

Join Date: Sep 2004

Posts: 49

Reputation: #tbone is an unknown quantity at this point

Solved Threads: 0

#tbone

Offline

Light Poster

Drop Down Menu - Problem Opening in IE

Oct 2nd, 2006

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:

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
<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>
<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<b></b>:gotoRootURL ()"><strong>Category</strong></a>
          <ul>
            <li> <a href=""><strong>Petite Tennis Bracelets</strong></a>
              <ul>
                <li><a href="javascript<b></b>:gotoRootURL( )"><strong>306</strong></a>
                  <ul><li><img src="/en/images/productshots/resized/306nav.jpg" alt="306" /></li></ul>
                </LI>
                <li><a href="javascript<b></b>:gotoRootURL( )"><strong>1326</strong></a>
                  <ul><li><img src="/en/images/productshots/resized/1326nav.jpg" alt="1326" /></li></ul>
                </LI>
                <li><a href="javascript<b></b>:gotoRootURL( )"><strong>1330</strong></a>
                  <ul><li><img src="/en/images/productshots/resized/1330nav.jpg" alt="1330" /></li></ul>
                </LI>
                <li><a href="javascript<b></b>: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<b></b>: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?

•

Join Date: Jun 2004

Posts: 434

Reputation: FC Jamison is on a distinguished road

Solved Threads: 20

FC Jamison FC Jamison is offline

Offline

Posting Pro in Training

Re: Drop Down Menu - Problem Opening in IE

Oct 8th, 2006

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.