Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17


Creating Drop Down Menus

Posted on 1999-06-25
Medium Priority
Last Modified: 2013-12-25
Hello all I need a good commented example of how to create a drop down menu, similar to what is on microsoft's homepage when you move the mouse pointer over the menu and a list of option appears and then when you move the mouse away the list disappears.

Question by:clsmaster
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3

Expert Comment

ID: 1863522
If you are going to use the same platform as the Microsoft Site (i.e., ASP/ActiveX), you can go to the Microsoft site and get a complete explanation of how their menus were built.

Be advised that this is an IE only solution.  I believe Michel (mplungjan) has proposed a cross browser solution somewhere on EE (JavaScript?).

You might also check out (either /js or /dhtml) for their tutorials.  I am not sure they do a drop down menu tutorial, but, if they do, it will give you everything you need.

LVL 18

Accepted Solution

mgfranz earned 150 total points
ID: 1863523
Try this; You can view the entire source at

 function MM_showHideLayers() {
    var i, visStr, args, theObj;
    args = MM_showHideLayers.arguments;
    for (i=0; i<(args.length-2); i+=3) {
      visStr   = args[i+2];
      if (navigator.appName == 'Netscape' && document.layers != null) {
        theObj = eval(args[i]);
        if (theObj) theObj.visibility = visStr;
      } else if (document.all != null) { //IE
        if (visStr == 'show') visStr = 'visible';
        if (visStr == 'hide') visStr = 'hidden';
        theObj = eval(args[i+1]);
        if (theObj) = visStr;
    } }


<a href="#" onMouseOver="MM_showHideLayers('document.layers[\'Layer2\']','document.all[\'Layer2\']','show')"
<img src="1.gif" width="164" height="14" border="0"></a>

<div id="Layer2" style="position:absolute; left:10px; top:30px; width:221px; height:163px; z-index:60; visibility: hidden">
<A href="#" onMouseOver="MM_showHideLayers('document.layers[\'Layer2\']','document.all[\'Layer2\']','show')"
<IMG src="1b.gif" border="0" usemap="#index" vspace="0" hspace="0" align="top"></A>
<MAP name="index">
    <AREA shape="rect" coords="4,78,150,95" href="link1.html" alt="Link1">
    <AREA shape="rect" coords="2,59,149,76" href="link2.html" alt="Link2">
    <AREA shape="rect" coords="7,42,148,57" href="link3.html" alt="Link3">
    <AREA shape="rect" coords="4,21,150,39" href="link4.html" alt="Link4">
    <AREA shape="rect" coords="5,1,151,18" href="link5.html" alt="Link5">

LVL 18

Expert Comment

ID: 1863524
I must point out that this solution is for 4.0 > browsers only...  For older browsers you can use the 'onMouseOver, onMouseOut', but image maps would need to be utilized.

I have a script that works for older browsers also if your interested.

P.S. change the "top:30px;" to "top:25px;"  In Netscape the gap will unload the <div>

Expert Comment

ID: 1863525
hey mgfranz... did u use Dreamweaver to create that by any chance? :-)
LVL 18

Expert Comment

ID: 1863526
No, why?

Featured Post

Learn how to optimize MySQL for your business need

With the increasing importance of apps & networks in both business & personal interconnections, perfor. has become one of the key metrics of successful communication. This ebook is a hands-on business-case-driven guide to understanding MySQL query parameter tuning & database perf

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Dramatic changes are revolutionizing how we build and use technology. Every company is automating, digitizing, and modernizing operations. We need a better, more connected way to work together as teams so we can harness the insights from our system…
Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…
The viewer will learn how to count occurrences of each item in an array.
Suggested Courses

715 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question