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 397,592 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,882 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: 4847 | Replies: 1

•

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?

•

Join Date: Jun 2004

Location: Hemet, CA

Posts: 427

Reputation: FC Jamison is on a distinguished road

Rep Power: 5

Solved Threads: 17

FC Jamison FC Jamison is offline

Offline

Posting Pro in Training

Re: Drop Down Menu - Problem Opening in IE

Oct 7th, 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.