<div class="menu_btn">
      <a href="#">Botão</a>
      <div class="submenu">
         <ul>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
         </ul>
      </div>
   </div>

.menu_btn{}
.menu_btn a{color:#000;background:#fff;text-decoration:none;border:1px solid transparent;padding:5px;}
.hover a{color:red;border:1px solid red;border-bottom:0}
.submenu{display:none;max-width:200px;border:1px solid red;margin-top:3px}
.hover .submenu{display:block;}

$(document).ready(function(){
    $(".menu_btn").click(function(e){
        var e=window.event||e;
        $(this).addClass("hover");
        e.stopPropagation();
      });
    $(document).click(function(e){
        $('.menu_btn').removeClass("hover");
    });
});