Javascript Delay for CSS dropdown menu

SITUATION:
I recently took the suckerfish menu and modified it to my liking.  But, having the multi-tiered menus proposes problems with usability in that it doesnt have a delay. I dont know javascript, but only HTML/CSS.  

QUESTION:
If somebody could show me a simple javascript that I could use to have the menu delay for a fraction of a second it would help out a lot.  Also a simple explanation of the principle on how it works.


MY CODE:  (just make an html file)


<style type="text/css">

/* structure */

#nav, #nav ul {
      float: left;
      width: 400px;
      list-style: none;
      line-height: 1;
      font-weight: bold;
      padding: 0;
      background: #008E7E;
      margin: 0;
}
#nav a {
      display: block;
      text-decoration: none;
}
#nav a.daddy {
      margin-right: 10px;
      background: url(right.gif) center right no-repeat;
}
#nav .topdaddy {
      margin-right: 5px;
      background: url(down.gif) center right no-repeat;
}
#nav li {
      float: left;
}
#nav li ul {
      border: 5px solid #016A5E;
      position: absolute;
      left: -999em;
      width: 10em;
}
#nav li li {
      width: 10em;
}
#nav li ul ul {
      border: 5px solid #016A5E;
      margin: -1.7em 0 0 10em;
}
#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 {
      background: #016A5E;
      left: auto;
}
#nav li:hover, #nav li.sfhover {
      background: #7BC7BF;
}

/* style */
#nav {
      position: relative;
      z-index: 1000;
}
#nav a,
#nav a:link,
#nav a:visited {
      text-decoration: none;
      color: white;
      white-space: nowrap;
      font-family: arial;
      font-size: 12px;
      padding: 5px 15px 5px 15px;
      text-decoration: none;
      display: block;
}
#nav li a {
      padding-left: 10px;
}
#nav a:hover {
      color: black;
}
</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>



<ul id="nav">

      <li><a class="topdaddy">Item</a>
            <ul>
                  <li><a class="daddy">Item</a>
                        <ul>
                              <li><a href="xxxxxxxxx">Item</a></li>
                              <li><a href="xxxxxxxxx">Item</a></li>
                              <li><a href="xxxxxxxxx">Item</a></li>
                        </ul>
                  </li>
                  <li><a class="daddy">Item</a>
                        <ul>
                              <li><a href="xxxxxxxxx">Item</a></li>
                              <li><a href="xxxxxxxxx">Item</a></li>
                              <li><a href="xxxxxxxxx">Item</a></li>
                        </ul>
                  </li>
                  <li><a class="daddy">Item</a>
                        <ul>
                              <li><a href="xxxxxxxxx">Item</a></li>
                              <li><a href="xxxxxxxxx">Item</a></li>
                              <li><a href="xxxxxxxxx">Item</a></li>
                        </ul>
                  </li>
                  <li style="background: none"><hr></li>
                  <li><a class="daddy">Item</a>
                        <ul>
                              <li><a href="xxxxxxxxx">Item</a></li>
                              <li><a href="xxxxxxxxx">Item</a></li>
                              <li><a href="xxxxxxxxx">Item</a></li>
                        </ul>
                  </li>
                  <li><a class="daddy">Item</a>
                        <ul>
                              <li><a href="xxxxxxxxx">Item</a></li>
                              <li><a href="xxxxxxxxx">Item</a></li>
                              <li><a href="xxxxxxxxx">Item</a></li>
                              <li><a href="xxxxxxxxx">Item</a></li>
                        </ul>
                  </li>
            </ul>
      </li>
      <li><a href="xxxxxxxxx">Item</a></li>
      <li><a href="xxxxxxxxx">Item</a></li>
      <li><a href="xxxxxxxxx">Item</a></li>



</ul>
IIIKrazyKiDDIIIAsked:
Who is Participating?
 
IIIKrazyKiDDIIIAuthor Commented:
Thanks for the references
0
 
Khanh DoanSenior DeveloperCommented:
You are welcome.
Bonmat86.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.