Javascript-форум - Скрытие элемента при нажатии в любую область экрана

Что я хотел сделать - скрипт в точности повторяющий скрытие/открытие контекстного меню ( на https://plus.google.com это настройки, значок шестеренка, на facebook это треугольник направленный вниз), скпытие должно происходить по нажатию в любой области экрана. Вот скрины контекстных меню, если кто-либо еще не понял о чём я:
http://s1.ipicture.ru/uploads/20111025/TUILFYr5.png
http://s2.ipicture.ru/uploads/20111025/UoVlkTUZ.png
Я абсолютный новичок в программировании, потому прошу строго не судить за вариант быдлорешения.
Реализовал так - есть основной див в нем контент, при нажатии на див менюха прячется, но меня и настигла злая шутка, я не смог запихнуть саму кнопку открывающую контекст меню в этот самый див, иначе бы это все не заработало,
Вот запилил рабочий вариант

<head>
    <style>
    .v-menu{border:solid 1px #7f9fbf; width:200px; clear:both;}
    ul.v-menu, v.menu li{padding:0; margin:0; list-style:none;}
    ul.v-menu{clear:both; margin-top:6px;padding:6px 2px;}
    ul#v-menu.v-menu li:hover {background-color: #D8DFEA;}
    ul#v-menu.v-menu li a{color: #333333;font-size: 11px;font-family: "lucida grande",tahoma,verdana,arial,sans-serif;text-decoration:none;padding-left:10px;}
    </style>
    <script type="text/javascript">
    
    function showElement(layer) {
    var myLayer = document.getElementById("v-menu");
    if ( myLayer.style.display=="none" )
    {
         myLayer.style.display="block";
         myLayer.backgroundPosition="top";
    } else { 
         myLayer.style.display="none";
    }
    }
    
    function hideElement(layer) {
    var myLayer = document.getElementById("v-menu");
    if ( myLayer.style.display=="block" )
    {
         myLayer.style.display="none";
    }
    }
    </script>
</head>
<div id="content" onclick="javascript:hideElement('v-menu')">

<a href="#" class="button" id="button" onclick="javascript:showElement('v-menu')">
    <span>Click Here</span>
</a>

    <div id="menu">
        <ul id="v-menu" class="v-menu" style="display:none;">
        <li><a href="/user/profile/">профиль</a></li>
        <li><a href="/user/viewfriends/">друзья</a></li>
        <li><a href="/user/saved/">избранное</a></li>
        <li><a href="/login.php?op=logout&return=">выйти</a></li>
        </ul>
    </div>
</div>

может кто посоветовать нормальный вариант реализации без всяких костылей и скрытых дивов?