qTip2 Dropdown menus

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.18/themes/base/jquery-ui.css">
<div class="container">
  <button class="btn">aaa</button>
  <button class="btn">bbb</button>
  <button class="dropdown">etc</button>
</div>
<div class="console"></div>
<ul class="menu">
    <li><a href="#">sub1</a></li>
    <li><a href="#">sub2</a></li>
</ul>

JavaScript

$(".btn").button();
var $menu = $(".menu").hide().menu();
$(".dropdown")
  .button({
    icons: {primary:"ui-icon-triangle-1-s"}
  })
  .on("click",function(e){
      $menu.show().position({
          my: "right top",
          at: "right bottom",
          of: this
      });
      $(document).one("click",function(){
          $menu.hide();
      });     
      e.stopPropagation();
  });
$(".menu").on("click", "a",function(){
  $(".console").text($(this).text());
});