// entries are HTML (e.g. links)
// requires JQuery for click-outside-to-close trick
// TODO: doesn't open on first click
sS hPopDownButton(S... entries) {
  S id = "dropdown-" + aGlobalID(), outerID = "outer-" + id;
  ret hstyle(replaceDollarVars([[
    #$id ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
      width: 200px;
      background-color: #f1f1f1;
    }
    
    #$id {
      position: absolute;
      display:none;
      background-color: #f9f9f9;
      width:auto;
      height:200px;
      overflow: auto;
     
      min-width: 160px;
      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
      
      z-index: 1;
      
    }
    
    #$id li a {
      display: block;
      border-bottom: 1px solid #555;
      color: #000;
      padding: 8px 16px;
      text-decoration: none;
    }
    
    #$id li a:hover {
      background-color: #3399ff;
      color: white;
    }  
  ]], $id := id))
  + hdiv(
      htmlEncode2(unicode_smallDownPointingTriangle())
    + hdiv(ul(entries), +id),
    style := "position: relative; display: inline-block; cursor: context-menu",
    onclick := replaceDollarVars([[
      var x = document.getElementById($id);
      console.log("pop open/close: " + window.getComputedStyle(x).display);
      x.style.display = window.getComputedStyle(x).display === "none" ? "block" : "none";
    ]], $id := jsQuote(id)), id := outerID)
    + hscript(replaceDollarVars([[
      if (typeof $ !== 'undefined')
        $('body').click(function(e) {
          console.log("pop click");
          if (!$(e.target).closest('#$outerID').length) {
            console.log("pop hide");
            $("#$id").hide();
          }
        });
    ]], +id, +outerID));
}