= pure css menus = 

I've been working on some code to get CSS menus working in both IE and Firefox.  I stole an implementation from GRC and hacked it down to its fundamentals.  They used list items which required three times the code.  This is much better, IMO.

== the xhtml ==

[code]
<div class="menu">
  <div class="key">Key</div>
  <div class="value">Value</div>
</div>
[/code]

== the css ==

[code]
.menu {
  position: relative; /* this is needed to get children to be relative to it */
  display: block;     /* not needed if using divs instead of spans /*
  height: 18px;       /* needed to have a reference for the top value below */
  width: 20em;        /* width of the menu */
  background: white;  /* not transparent! (could be same color as parents) */
}

.menu .value {
  position: absolute; /* this is needed to be placed relative to parent menu */
  display: none;      /* hide it by default first */
  top: 18px;          /* this is relative to the height of the menu container */
  left: 0px;          /* this is relative to the left of the menu container */
  width: 20em;        /* width of the drop down menu */
  background: white;  /* not transparent! (could be same color as parents) */
}

.menu:hover .value {
  display: block;     /* show it when we hover over the parent */
}
[/code]