Carets at top of dropdowns
Trying to make carets display only on second-level menu items, not also on third-level menu items.
HTML
<script src="http://unitedwaytoronto.com/prototype/js/jquery.smartmenus.js"></script>
<div id="nav" class="row clearfix show-for-large-up">
<div class="large-12 columns menucontainer" style="padding-left:0;">
<ul class="main-menu sm sm-simple">
<li class="menuItem1 first parent selected"><a href="#">About Us</a>
<ul class="nccUlMenuSub1">
<li class="menuItem1 first parent selected"><a href="#">Our commitment</a>
<ul class="nccUlMenuSub2">
<li class="menuItem1 first"><a href="#">Operating standards</a>
</li>
<li class="menuItem2 selected last"><a href="#">Policies</a>
</li>
</ul>
</li>
<li class="menuItem2 last"><a href="#">Annual Report</a>
</li>
</ul>
</li>
<li class="menuItem2 last parent"><a href="#">Giving</a>
<ul class="nccUlMenuSub1">
<li class="menuItem1 first last"><a href="#">What your gift can do</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
<script src="js/jquery.smartmenus.js"></script>
<script>
$(function() {
$('.main-menu').smartmenus();
});
</script>
CSS
/* See: http://www.smartmenus.org/docs/*/
/*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;
}
.sm-simple > li > ul {
border:1px solid #a9abac;
}
.sm-simple > li > ul > li > ul {
border:1px solid #a9abac;
}
/* Menu items
===================*/
.sm-simple a {
padding:0.4rem 0.8rem;
color:#000;
font-size:1rem;
line-height:1.5rem;
text-decoration:none;
/*border-left:1px solid #eee;*/
}
.sm-simple > li > a {
/*border-left:0;*/
}
.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;
}
/* Sub menu...