Slidedown menu

[ma201dq]

Hi,

I have a Horizontal menu such that when you point your mouse over a link say; "Info" it then displays more sub links. At the moment it displays all sublinks at the same time, but what i want is to display each sublink as slide down but per link. e.g.

Info <<<<<<<<<<<<<<main link

about us<<<<<<<<<<<sublink
job oppertunities<<<<<sublink

what i want is when mouse is over info, to first display "about us" after 1 or 2 seconds display job oppertunities.

My code:
CSS & JavaScript

#nav, #nav ul { /* all lists */
    margin:0;
    list-style: none;
    line-height: 1;
}

#nav a {
    display: block;/*display sub below main menu*/
    width: 9em;
    padding-top:2px;
}

#nav li { /* all list items */
    float: right;
    width: 6em;

    
    
}

#nav li ul { /* second-level lists */
    position: absolute; /*hide sub content, display whem mouse over*/ 
    width: 9em;
    font-size:12px;
    list-style-type: none;
    left: -999em;
    
}

#nav li:hover ul, #nav li.sfhover ul { /* lists nested under hovered list items */
    left: auto;
    
}

#content {
    clear: left;
}

</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> 

html code:

<td height="52">
       <ul id="nav">
           <li>
   <font face="Tahoma" size="2">
   <a href="#" style="text-decoration: none; font-weight:700">
   <font color="#FF9966">SOLUTIONS</font></a></font>
        <ul>
            <li><a href="#" style="text-decoration: none; font-weight:700">
            <font color="#FF9966">Web Development</font></a></li>
            <li><a href="#" style="text-decoration: none; font-weight:700">
            <font color="#FF9966">Web Design</font></a></li>
            <li><a href="#" style="text-decoration: none; font-weight:700">
            <font color="#FF9966">E-Commerce</font></a></li>
            
        </ul>
    </li>
    <li>
   <font face="Tahoma" size="2">
   <a href="#" style="text-decoration: none; font-weight:700">
   <font color="#FF9966">PORTFOLIO</font></a></font>
        <ul>
            <li><a href="#" style="text-decoration: none; font-weight:700">
            <font color="#FF9966">Web Development</font></a></li>
            <li><a href="#" style="text-decoration: none; font-weight:700">
            <font color="#FF9966">Web Design</font></a></li>
            <li><a href="#" style="text-decoration: none; font-weight:700">
            <font color="#FF9966">E-Commerce</font></a></li>
            
        </ul>
    </li>
<li>
   <font face="Tahoma" size="2">
   <a href="#" style="text-decoration: none; font-weight:700">
   <font color="#FF9966">ABOUT US</font></a></font>
        <ul>
            <li><a href="#" style="text-decoration: none; font-weight:700">
            <font color="#FF9966">About</font></a></li>
            <li><a href="#" style="text-decoration: none; font-weight:700">
            <font color="#FF9966">Objective</font></a></li>
            <li><a href="#" style="text-decoration: none; font-weight:700">
            <font color="#FF9966">E-Commerce</font></a></li>
            
        </ul>
    </li>
   
      </ul>
     </div>
    
   </td> 

cheers

[MikeFoster]

Do you mean, if there are 10 items in a menu then the user will have to wait for 10 seconds just to see all the menu's contents? Eeek!

[ma201dq]

no i dont mean that. i dont want the entire submenu to display all at once. i want each item in the submenu to display one at a time. i dont know how else to explain this, but the menu on this link does what i want:

http://www.iwebsolutions.co.uk/

thanks

[MikeFoster]

You are seeing a Flash menu, however it could also be done with DHTML.

That site is designed pretty well. Notice that if you disable Flash support you then get a CSS List menu. Pretty nice work.

Look at their source code to see what they are doing.