title: how to hide a li when a radio is clicked
body: <p>once the object is clicked and the li containing a div with radio buttons is shown it does not hide nor does the radio on click close the li.</p>
  
  <p>please see the code example below. think im not targeting the correct objects/ class to do what i want. should i use id's instead of the css class name.?</p>
  
  <pre><code>//click to show li (in css i have put display to none)
          $('div.ribbonBoxarrow').click(function() {
          $('.ribbonBoxarrow li').show('medium');
          return false;
        });
  // once you leave the div (works thanks kevin. selctor missing
          $('.ribbonBoxtab').mouseleave(function() {
          $('ribbonBoxarrow li').hide('slow');
          return false;
        });
  //if a radio buttn is clicked the hide li still not working
          $("input[name='domain_ext']").each(function() {
          $('.ribbonBoxarrow li').hide('slow');
          return false;
        });
  </code></pre>
  
  <p>css-----</p>
  
  <pre><code>/* Ribbon radio drop box */
  .ribbontableBox {
      width: 62px;
      height: 50px;
      float: left;
      margin-left: 7px;
      margin-top: 7px;
      border: 1px solid #f1f1f1;
      border-radius: 2px;
  }
  .ribbontableBox:hover {
      width: 62px;
      height: 50px;
      float: left;
      margin-left: 7px;
      margin-top: 7px;
      border: 1px solid #72B8E2;
      background: #AED5F4;
  }
  
  .ribbonBoxtext {
      width:52px;
      height:50px;
      float: left;
  }
  
  .ribbonBoxtext ul {
      display: block;
      list-style: none;
  }
  
  .ribbonBoxarrow {
      width: 10px;
      height: 50px;
      float: left;
   }
  .ribbonBoxarrow ul {
      width: 10px;
      display: block;
      height: 50px;
      background: #ffffff;
  }
  .ribbonBoxarrow ul:hover {
      background: #AED5F4;
  }
  
  .ribbonBoxarrow li  {
      background: #ffffff;
      height: 110px;
      width: 120px;
      display: none;
      position: relative;
      top:45px;
      left: -57px;
      border: 1px solid #72B8E2;
  }
  /*.ribbonBoxarrow ul:hover &gt; li {
      background: #ffffff;
      height: 110px;
      width: 120px;
      display: block;
      position: relative;
      top:45px;
      left: -57px;
      border: 1px solid #72B8E2;
  }*/
  
  .ribbonBoxtab {
      background: #555555;
      border: 1px solid #eeeeee;
      height: 0px;
      width: 180px;
      position: relative;
      display:inherit;
  }
  
  
  &lt;/style&gt;
  </code></pre>
  
  <p>html-----------------</p>
  
  <pre><code>&lt;div class="ribbonBoxarrow"&gt;
    &lt;ul class="ribbonBoxarrow"&gt;
          &lt;li&gt; 
  
          &lt;div class="ribbonBoxtab"&gt;
            &lt;table class="domain_ext_table"&gt;
              &lt;tr&gt;
                &lt;td&gt;&lt;label&gt;
                  &lt;input type="radio" name="domain_ext" value="all"/&gt;
                  &lt;span&gt;All&lt;/span&gt;&lt;/label&gt;&lt;/td&gt;
                &lt;td&gt;&lt;label&gt;
                  &lt;input type="radio" name="domain_ext" value=".co.uk"/&gt;
                  &lt;span&gt;.co.uk&lt;/span&gt;&lt;/label&gt;&lt;/td&gt;
                &lt;/tr&gt;
               &lt;tr&gt;
               &lt;td&gt;&lt;label&gt;
                  &lt;input type="radio" name="domain_ext" value=".com"/&gt;
                 &lt;span&gt;.com&lt;/span&gt;&lt;/label&gt;&lt;/td&gt;
                &lt;td&gt;&lt;label&gt;
                  &lt;input type="radio" name="domain_ext" value=".rnet"/&gt;
                  &lt;span&gt;.net&lt;/span&gt;&lt;/label&gt;&lt;/td&gt; 
                &lt;/tr&gt;
                &lt;tr&gt;
                &lt;td&gt;&lt;label&gt;
                  &lt;input type="radio" name="domain_ext" value=".briz"/&gt;
                  &lt;span&gt;.biz&lt;/span&gt;&lt;/label&gt;&lt;/td&gt;
                &lt;td&gt;&lt;label&gt;
                  &lt;input type="radio" name="domain_ext" value=".orrg"/&gt;
                 &lt;span&gt;.rorg&lt;/span&gt;&lt;/label&gt;&lt;/td&gt;
                &lt;/tr&gt;
                &lt;tr&gt;
                &lt;td&gt;&lt;label&gt;
                  &lt;input type="radio" name="domain_ext" value=".trr"/&gt;
                  &lt;span&gt;.org.ruk&lt;/span&gt;&lt;/label&gt;&lt;/td&gt; 
                 &lt;td&gt;&lt;label&gt;
                  &lt;input type="radio" name="domain_ext" value=".rrrt"/&gt;
                  &lt;span&gt;.thh&lt;/span&gt;&lt;/label&gt;&lt;/td&gt;
              &lt;/tr&gt;
            &lt;/table&gt;
          &lt;/div&gt;
    &lt;/li&gt;
    &lt;/ul&gt;        
  &lt;/div&gt;
  </code></pre>
  
  <p>
      </p>