Chevron as sub-arrow?

Using SmartMenus, how can I use a chevron for the sub-arrow instead of the + character or an image?

by Linda Brennan

HTML

<script src="http://unitedwaytoronto.com/prototype/js/jquery.smartmenus.js"></script>
<div class="pagecontainer">        

<!--Small menu - See: http://www.smartmenus.org/docs/-->
    <div class="smallnav">
        <ul class="main-menu sm sm-simple">
            <li class="menuItem1 first parent selected"><a>Menu item 1</a>
                <ul class="nccUlMenuSub1">
                    <li class="menuItem1 first parent selected"><a>Sub item 1.1</a>
                        <ul class="nccUlMenuSub2">
                            <li class="menuItem1 first"><a>Subitem 1.1.1</a></li>
                            <li class="menuItem2 selected last"><a class="selected" href="#">Subitem 1.1.2</a></li>
                        </ul>
                    </li>
                    <li class="menuItem2 last"><a>Subitem 1.2</a></li>
                </ul>
             </li>
             <li class="menuItem2 last parent"><a>Menu item 2</a>
                 <ul class="nccUlMenuSub1">
                     <li class="menuItem1 first last"><a>Subitem 2.1</a></li>
                 </ul>
             </li>
         </ul>             
     </div><!--End small nav-->          

    <div id="content">
        <div id="contentbuckets" class="row clearfix">                
                content goes here      
        </div>
    </div><!--End Content-->
    
</div><!--End pagecontainer-->

<script src="js/jquery.smartmenus.js"></script>    
<script>        
    $(function() {
    $('.main-menu').smartmenus();
    });
</script>

CSS

/*Core SmartMenu CSS (do not edit this)*/
  .sm,.sm ul,.sm li{display:block;list-style:none;padding:0;margin:0;line-height:normal;direction:ltr;}
  ul.sm li{position:relative;}
  ul.sm a{position:relative;display:block;}
  ul.sm a.disabled{cursor:default;}
  ul.sm ul{position:absolute;top:-999999px;left:-800px;width:100px;}
  ul.sm li{float:left;}
  ul.sm-rtl{direction:rtl;}
  ul.sm-rtl li{float:right;}
  ul.sm ul li,ul.sm-vertical li{float:none;}
  ul.sm a{white-space:nowrap;}
  ul.sm ul a,ul.sm-vertical a{white-space:normal;}
  * html ul.sm-vertical li{float:left;width:100%;}
  * html ul.sm-vertical ul li{float:none;width:auto;}
  *:first-child+html ul.sm-vertical>li{float:left;width:100%;}
  ul.sm ul.sm-nowrap>li>a{white-space:nowrap;}
  ul.sm:after{content:"\00a0";display:block;height:0;font:0/0 serif;clear:both;visibility:hidden;overflow:hidden;}
  * html ul.sm{height:1px;}
  *:first-child+html ul.sm{min-height:1px;}
  ul.sm li *,ul.sm li *:before,ul.sm li *:after{-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}
  ul.sm{-webkit-tap-highlight-color:rgba(0,0,0,0);}

/*SmartMenu CSS that you can customize*/

/* Menu box
===================*/
  .sm-simple,
  .sm-simple ul {
    border:0;
    background:#fff;
  } 

/* Menu items
===================*/
  .sm-simple a {
    padding:0.4rem 0.8rem;
    color:#000;
    font-size:1rem;
    line-height:1.5rem;    
    text-decoration:none;
  }
  .sm-simple a:hover, .sm-simple a:focus, .sm-simple a:active,
  .sm-simple a.highlighted {
    background:#eee;
    color:#000;
  }
  .sm-simple a.has-submenu {
    padding-right:2rem;
  }
  .sm-simple ul a.has-submenu {
    padding-right:1rem;
  }
  .sm-simple > li > a {
    text-transform: uppercase;
  } 
  .sm-simple > li > a:hover, .sm-simple > li > a:focus, .sm-simple > li > a:active, .sm-simple > li > a.highlighted{
    background:none;
    color:#da291c;
  } 
  
/* Sub menu indicators
===================*/
  .sm-simple a span.sub-arrow {
 ...