Javascript Question

Below is a screen shot of a full width drop menu (Dolphin 7.1) .  What I would like to do, is give the user another way to close the menu other than mousing off the ul. ....  <ul class="sub main_elements">

The ul has a class name, but I could give it an id if necessary.  What I need, is to place a image or text "Menu Close" link on the menu, so that clicking on this image or text will close the menu without mousing off ul .sub .main_elements.  Anybody have any ideas on how to do this with javascript?

Thanks for all the help everyone :)

I gave this a try, and it worked.  Problem solved.

<script>
$(document).ready(function(){
  $("button").click(function(){
    $("ul").addClass("ulClose");
  });
});
$(document).ready(function(){
  $("button").mouseout(function(){
    $("ul").removeClass("ulClose");
  });
});
</script>
<style>
.ulClose {
display:none !important;
}

.menuClose {
background: #101010;
border:1px solid #333333;
padding:4px;
border-radius:4px;
color:#00aa00;
text-transform:none;
}

.menuClose:hover {
background: #151515;
color:#cc0000;
cursor:pointer;
}
</style>

We are glad to help :P