How to turn this menu into a MultiLevel one?

Question

I just found this cool horizontal drop down menu:

http://css-tricks.com/examples/DiggHeader/#

And I would love to use it, but I require multilevel. But not a clue how to do it. I have searched for tutorials on how to create multilevel menu, but can only find downloads and demo previews. :-S

Can anyone offer any suggestions on how I would go about making the menu above multilevel?

Thank you

Answer 1

You can check out a minimalistic navigation plugin I made for jQuery. You can probably get it to work just like that link by changing the css to use relative and absolute positioning of the ul lists.

Answer 2

I love CSS-Tricks, this can be done in a few ways. Here is a quick example how I suggest you go about this.

HTML MarkUp;

<div id="nav">
  <ul>
    <li>
      <a href="...">Technology</a>
      <ul>
        <li><a href="...">Apple</a>
          <ul>
            <li><a href="...">iPhone</a></li>
          </ul>
        </li>
        <li><a href="...">Design</a></li>
      </ul>
    </li>
  </ul>
</div>

Notice the <ul> within the next to <a href="...">Apple</a> .

CSS Only method;

<style>
  #nav ul li ul{
    display:none;
  }
  #nav ul li:hover>ul{
    display:block;
  }
</style>

This CSS will hide elements not needed to be shown until a user hover's over an element. then will Show on hover.

This element hover can be done in JavaScript, if you wish to change the effect.

jQuery Method;

<style>
  #nav ul li ul{
    display:none;
  }
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script>
  $("#nav ul li").each(function(){
    $(this).mouseenter(function(){
      $(this).find("ul:first").show();
    }).mouseleave(function(){
      $(this).find("ul:first").hide();
    });
  })
</script>