ボックスを非表示にするためのリンクではなく、ボックスの外側をクリックしたときにこのブラックボックスを非表示にする方法は？

ボックスを非表示にするために（クリックして）ではなく、外側のボックスをクリックしたい。ただし、ボックスとリンクをクリックすると、ボックスをオンのままにします。ここの誰かが助けてくれることを願っています。本当にありがとう。君たちは最高です。ここにhttp://jsfiddle.net/hamdlink/y94nr/があります

 <style>
    ul li{
        list-style: none;
    }
        .click-me{
            display: inline;
        }
        .hidden{
            display:none;
            background: #333;
            width:150px;
            color:red;
            padding:30px;
        }
    </style>
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script>
        $(document).ready(function(){
            $('.click-me').click(function(){
                $('.hidden').slideDown();
            });

            $('body').click(function(e){
                if(e.target.className!=='click-me'){
                    $('.hidden').slideUp();
                }
            });
        });
    </script>
    <ul>
        <li class="click-me">click me
            <ul class="hidden">
                <li>Link 1</li>
                <li>Link 2</li>
                <li>Link 3</li>
                <li>Link 4</li>
                <li>Link 5</li>
                <li>Link 6</li>
            </ul>
        </li>
    </ul>