The HTML and their Tags Conceptual Roles

I will start with the HTML code because it is easy—as it should be.

<ul id="navigation">
   <li><a href="/">Launch</a></li>
   <li><a href="/about/" >About</a>
      <ul><li><a href="/about/index.php#seamus">Seamus</a></li><li><a href="http://portfolio.moronicbajebus.com/">Portfolio</a></li><li class="last-child"><a href="/about/resume/">Resume</a></li></ul>
   </li>
</ul>

From the HTML code I am going to attach concepts (based upon their function) to the elements. To illustrate this I will use a tree with the tag name, a description, and the children tags.

• ul#navigation
  • li
    The top level item container or for short the top level item.
    • a
      The top level item link.
    • ul
      The submenu container or for short the submenu. This is optional.
      • li
        The submenu item.
        • a
          The submenu link.

If you want to see what those concepts relate to the finished product, here you go:

Or if you want to see where the tags will be in the finished product, here you go:

Difference from Normal CSS Drop Down Menus

Now I am not going to explain the entire process. There are many other fine tutorials to explain CSS drop down menus. As for the specifics to Drop Down Llama Menu, the nested ul (the submenu) is not hidden outright; but the lis (submenu items) of the nested ul (submenu) is hidden.

Normally:
ul#navigation > li > ul{ display: none; }

Drop Down Llama:
ul#navigation > li > ul > li{ display: none; }

This leads into another difference. The submenu is not triggered to show (open) by hovering over the top level item. But instead the submenu items—not submenu —are triggered to show by hovering over the submenu container.

Normally:
ul#navigation > li:hover > ul{ display: block; }

Drop Down Llama:
ul#navigation > li > ul:hover > li{ display: block; }

As for the drop-down icon, that is just the background image of the submenu container (ul#navigation > li> ul). The rest is either just positioning of elements or decorative trim.

Files

1. Original proof of concept
2. Second proof of concept which works in IE6
3. Barebones example with cleaned up code and documentation

The jump menu is very much like a drop-down menu but not quite. Yes when you hover over it a menu drops down of links but the Javascript jump menu is usably with the keyboard (meaning in Firefox and IE I can cycle through the links with a tab key). The problem is that you can only tab through non-hidden links. So I worked a new way to hide the links without hiding (display: none or visibility: hidden) the links. In hiding the links, the label for the jump menu play an important role in masking the links. The links, in the default state, hide underneath the label. When you hover over the label, the links show like they should. Also when you tab, the links will be given focus one at a time which is when the particular link shows.

Oh right, IE 6 does not support :hover well and :focus at all. IE7 comes to the rescue.

Finally, the example.