[snippet] simple CSS dropdown list menu

// CSSDropMenu
// simple drop=down menu for ModX
// usage: [[DropDown?id=x&tt=y]]
// where x is the parent of the documents to be listed
// and y is the text you want for the top of the menu

$id = isset($id)?$id:0;
$children = $modx->getActiveChildren($id);
if($children == false) return;
$toptext = isset($tt)?$tt:"Menu";
$dm = "";

  // a bit of javascript for those whose browsers aren't 
  // CSS2 compliant (and we all know who they are)
$dm .= "<script type='text/javascript'>
function showList(thistag) {
   styleObj = document.getElementById(thistag).style;
   if (styleObj.display=='none') {styleObj.display = 'block';}
   else {styleObj.display = 'none';}
}
</script>";

  // set up the style for the list
$dm .= "<style type='text/css'>
  #CSSMenu {
      position:relative;
      width:100px;
      z-index:10;
      background:yellow;
  }
  #CSSMenu ul, #CSSMenu li {list-style:none;}
  #cmTopItem {display:block;cursor:pointer;}
  #cmTopItem ul {display: none;} 
  #cmTopItem:hover ul {display: block;}
</style>";

  // generate the list
$dm .= "<div id='CSSMenu'>";
$dm .= "<ul class='cmList' id='cmTopList'>";
$dm .= "<li id='cmTopItem' class='cmItem' onClick='showList(\"cmList\");'>$toptext";
$dm .= "<ul class='cmList' id='cmList'";
  // individual items
foreach($children as $child) {
    $dm .= "<li class='cmItem'>";
    $dm .= "<a href='";
    $dm .= "[~".$child['id']."~]";
    $dm .= "'>";
    $dm .= $child['pagetitle']; 
    $dm .= "</a>";
    $dm .= "</li>";
}
$dm .= "</ul></li></ul></div>";

return $dm;