how to hide a li when a radio is clicked

Question

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.

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.?

//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;
      });

css-----

/* 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 > 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;
}


</style>

html-----------------

<div class="ribbonBoxarrow">
  <ul class="ribbonBoxarrow">
        <li> 

        <div class="ribbonBoxtab">
          <table class="domain_ext_table">
            <tr>
              <td><label>
                <input type="radio" name="domain_ext" value="all"/>
                <span>All</span></label></td>
              <td><label>
                <input type="radio" name="domain_ext" value=".co.uk"/>
                <span>.co.uk</span></label></td>
              </tr>
             <tr>
             <td><label>
                <input type="radio" name="domain_ext" value=".com"/>
               <span>.com</span></label></td>
              <td><label>
                <input type="radio" name="domain_ext" value=".rnet"/>
                <span>.net</span></label></td> 
              </tr>
              <tr>
              <td><label>
                <input type="radio" name="domain_ext" value=".briz"/>
                <span>.biz</span></label></td>
              <td><label>
                <input type="radio" name="domain_ext" value=".orrg"/>
               <span>.rorg</span></label></td>
              </tr>
              <tr>
              <td><label>
                <input type="radio" name="domain_ext" value=".trr"/>
                <span>.org.ruk</span></label></td> 
               <td><label>
                <input type="radio" name="domain_ext" value=".rrrt"/>
                <span>.thh</span></label></td>
            </tr>
          </table>
        </div>
  </li>
  </ul>        
</div>

Answer 1

The code is missing the . in the class selector. Also I changed .each to .click for the radio event handlers. If your loading this code on page load you should wrap it with document.ready

$(document).ready(function(){
    //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 (which is contained in the above li hide.
            $('.ribbonBoxtab').mouseleave(function() {
                $('.ribbonBoxarrow li').hide('slow'); //missing .
                return false;
            });
    //if a radio buttn is clicked the hide li
            $("input[name='domain_ext']").click(function() { //changed .each to .click
                $('.ribbonBoxarrow li').hide('slow'); //missing .
                return false;
            });
});

Working Example: http://jsfiddle.net/3wkpZ/