Make navigation bar with onhover dropdown list

Tons of websites have this feature where hovering over a link in the navigation bar extends a dropdown with more details. There are countless such sites, The Dell and Nvidia homepages are two examples.

I've looked it up, and it seems like you have to chan开发者_如何学编程ge the visibility of a list onmouseover and onmouseout.

How can I replicate this effect?

Have a look at DynamicDrive.com. They have loads of menu's, many with dropdown effects. They all include tutorials on how to implement them.

http://www.dynamicdrive.com/dynamicindex1/index.html

Lots of different ways to do this. Easiest to use a jquery plugin like droppy() - we've used this in production lots of places. http://onehackoranother.com/projects/jquery/droppy/

You can get the code here: http://plugins.jquery.com/project/droppy

It was made in 2008 but it's very small and uses stable jQuery. We use it in production on jQuery 1.5+ and 1.6+. Check out these examples: http://lvsys.com/, http://noblepigwine.com and here too for nested levels: http://pacificnwvacations.com/ ---- it's flexible

Example markup (without the css)

 <ul id="top-menu">
      <li>Home</li>
      <li>Product</li>
      <li>About</li>
      <li><a href='#'>Services</a>
          <ul>
               <li>Sub item 1</li>
               <li>Sub item 2</li>
          </ul>
      </li>
   <ul>



<script type='text/javascript'>
      $(function() {
         $('#top-menu').droppy();
      });
</script>

Check out the droppy plugin page for a full example including css.