CSS for this example

.jBellows {
   padding: 3px 10px 3px 10px;
   width:350px;
   float:left;
}

.jBellows ul {
   padding: 0;
}

.jBellows li {
   background: #FFF;
   list-style-type:none;
   padding:10px;
   line-height:20px;
}

.jb_expand, .jb_expanded {
   color:#FFF;
   background:#000 url('arrows.png') no-repeat center center;
   height:30px;
   width:20px;
   margin-top:-5px;
   cursor:pointer;
   float:right;
}

.jb_expand:hover {
   color:#F00;
   background-color:#F00;
}

HTML for this example

Wrap the whole thing in this: <ul class="jBellows">

For each item with subitems you'd like to add:
<li>Menu Item 4<span class="jb_expand"></span>
   <ul>
      <li>Item 4 Subitem
      <li>Item 4 Subitem
      <li>Item 4 Subitem
      <li>Item 4 Subitem
      <li>Item 4 Subitem
   </ul>
</li>

jQuery for this example

$(document).ready(function(){
   $('.jBellows').jBellows({
      speed: 500,
      easing: 'easeInOutQuint'
   });
});

Notes
Any easing works, but easing is not required. The plugin checks for the easing default variables to see if the easing plugin is present, so added easing to this without having the easing plugin doesn't break it.