Toggle with click effect [duplicate]

Question

Possible Duplicate:
How to detect a click outside an element?

 <ul id="rightNav">

      <li id="SettingOpt">
        <a href="javascript:void(0)">username<span class="fabShopSprite iRecentIcon iUserIcon"></span></a>
        <div class="userMenu">
          <ul>
            <li><a class="Setting" href="/">Settings</a></li>
            <li><a class="Setting lastShadow" href="/">Logout</a></li>
          </ul>
        </div>
      </li>

    </ul>

It is working proper as a menu, but my requirement is when a user click out side this block it goes of and another effect i want toggle effect, toggle effect is working fine for me, but when i click out side of that wrap #rightNavToggle its not going off. My another requirement is when a user click on its sub navigation, again the sub navigation should goes off. Used Java script

$("#SettingOpt a").click(function() {
        var parent = $(this).parent();
        parent.toggleClass("selected");
        parent.find("div.userMenu").toggle();
      });

Answer 1

Just made a simple example based upon @syrion ref. http://jsfiddle.net/cfmitrah/5grcu/