[StupidScript]

Here's JS+CSS:

<style type="text/css">
.menu1 { background-color:#dedeff }
#menu1 { position:absolute }
.menu2 { background-color:#ffdede }
#menu2 { position:absolute;left:100px }
A { text-decoration:none;color:black }
</style>
<script type="text/javascript">
function showDiv(div,state) {
 if (state) { vis="visible"; }
 else { vis="hidden"; }
 thisdiv=document.getElementById(div);
 thisdiv.style.visibility=vis;
}
</script>
<div id="menu1">
 <a href="#"
  onmouseover="showDiv('sub1',1)"
  onmouseout="showDiv('sub1',0)">Menu Item 1</a><br />
 <div id="sub1" style="visibility:hidden">
  <span class="menu1">SubItem 1.1 | SubItem 1.2</span>
 </div>
</div>
<div id="menu2">
 <a href="#"
  onmouseover="showDiv('sub2',1)"
  onmouseout="showDiv('sub2',0)">Menu Item 2</a><br />
 <div id="sub2" style="visibility:hidden">
  <span class="menu2">SubItem 2.1 | SubItem 2.2</span>
 </div>
</div>

And still there's extra code needed to keep the sub-divs visible when the cursor rolls off the links, but there you have the basic idea ... Remember those browsers that don't support :hover on divs ... there's got to be an alternative for them.