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
PHP Code:

#nav, #nav ul { /* all lists */
    
margin:0;
    list-
stylenone;
    
line-height1;
}

#nav a {
    
displayblock;/*display sub below main menu*/
    
width9em;
    
padding-top:2px;
}

#nav li { /* all list items */
    
floatright;
    
width6em;

    
    
}

#nav li ul { /* second-level lists */
    
positionabsolute/*hide sub content, display whem mouse over*/ 
    
width9em;
    
font-size:12px;
    list-
style-typenone;
    
left: -999em;
    
}

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

#content {
    
clearleft;
}

</
style>


<
script type="text/javascript"><!--//--><![CDATA[//><!--

sfHover = function() {
    var 
sfEls document.getElementById("nav").getElementsByTagName("LI");
    for (var 
i=0i<sfEls.lengthi++) {
        
sfEls[i].onmouseover=function() {
            
this.className+=" sfhover";
        }
        
sfEls[i].onmouseout=function() {
            
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
        }
    }
}
if (
window.attachEventwindow.attachEvent("onload"sfHover);

//--><!]]></script> 
html code:

PHP 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