Drop Down Menu - Problem Opening in IE

•

What is DaniWeb IT Discussion Community?

You're currently browsing the JavaScript / DHTML / AJAX section within the Web Development category of DaniWeb, a massive community of 374,612 software developers, web developers, Internet marketers, and tech gurus who are all enthusiastic about making contacts, networking, and learning from each other. In fact, there are 2,397 IT professionals currently interacting right now! Registration is free, only takes a minute and lets you enjoy all of the interactive features of the site.

Join our community!

Please support our JavaScript / DHTML / AJAX advertiser: Lunarpages Web Hosting

Thread Tools Display Modes

Views: 4581 | Replies: 1

Previous Post in Thread

Next Post in Thread

•

Join Date: Sep 2004

Posts: 44

Reputation: #tbone is an unknown quantity at this point

Rep Power: 4

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

(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?