Is There a CSS Way to Add an Arrow If a Ul Has a Ul Child

CSS- ckeck and add right arrow where li has ul

So there's really no parent selector in CSS, but as you've tagged this with jQuery, we can use the :has() selector to do much the same behavior. Basically, if a LI el contains a UL, we should assume the UL is a submenu, and I will add the 'js-has-a-submenu' class to the anchor el that we're using for the menu items. I've prefixed it with 'js-' simply to reflect that it isn't a statically applied class, but one we'll only use via js.

The code here is actually taken from the menu example I'd referenced in the commments, but then I noticed they'd hard-coded the down-arrow into the menu, which really breaks what you're trying to do, from what I understand. So I removed the down arrow, and used jQuery to apply the class. To understand the menus themselves, please do go read this, as I think it does pretty well (not a fan of the pink, but its css).

$("li:has(ul)").find("a:eq(0)").addClass("js-has-a-submenu");

body {  background: #333;}
.clearfix:after {  display: block;  clear: both;}

/*----- Menu Outline -----*/
.menu-wrap {  width: 100%;  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.2);  background: #3e3436;}
.menu {  width: 1000px;  margin: 0px auto;}
.menu li {  margin: 0px;  list-style: none;  font-family: 'Ek Mukta';}
.menu a {  text-decoration:none;  transition: all linear 0.15s;  color: #919191;}
.menu li:hover > a,.menu .current-item > a {  text-decoration: none;  color: #be5b70;}
.menu .arrow {  font-size: 11px;  line-height: 0%;}

/*----- Top Level -----*/
.menu > ul > li {  float: left;  display: inline-block;  position: relative;  font-size: 19px;}
.menu > ul > li > a {  padding: 10px 40px;  display: inline-block;  text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.4);}
.menu > ul > li:hover > a,.menu > ul > .current-item > a {  background: #2e2728;}

/*----- Bottom Level -----*/
.menu li:hover .sub-menu {  z-index: 1;  opacity: 1;}
.sub-menu {  width: 160%;  padding: 5px 0px;  position: absolute;  top: 100%;  left: 0px;  z-index: -1;  opacity: 0;  transition: opacity linear 0.15s;  box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.2);  background: #2e2728;}
.sub-menu li {  display: block;  font-size: 16px;}
.sub-menu li a {  padding: 10px 30px;  display: block;}
.sub-menu li a:hover,.sub-menu .current-item a {  background: #3e3436;}
.js-has-a-submenu::after {     content: " \2193";}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div class="menu-wrap">  <nav class="menu">    <ul class="clearfix">      <li><a href="#">Home</a></li>      <li>        <a href="#">Movies </a>
        <ul class="sub-menu">          <li><a href="#">In Cinemas Now</a></li>          <li><a href="#">Coming Soon</a></li>          <li><a href="#">On DVD/Blu-ray</a></li>          <li><a href="#">Showtimes & Tickets</a></li>        </ul>      </li>      <li><a href="#">T.V. Shows</a></li>      <li><a href="#">Photos</a></li>      <li><a href="#">Site Help</a></li>    </ul>  </nav></div>

Arrow on pure CSS menu drop down that has children

Gosh, I was able to solve this just now using trial and error using the following code:

nav ul li > a:not(:last-child):after  { content: ' ▾'; }

The thing about it is I had tried this originally and it didn't work.

nav ul li > a:not:last-child:after  { content: ' ▾'; }

So the key is you have to use the parenthesis with the :not modifier which I was not aware. Basically the not operator did the "opposite" of what I had and poof it worked.

CSS: how to place a right arrow at the end of a LI containing a UL.submenu

Make use of pseudo elements

Try this

CSS

   ul.sub-nav > li.menu-item-has-children::after{
        content: "";
        position: absolute;
        right: 0px;
        height: 0px;
        top: 0;
        bottom: 0;
        margin: auto;
        border: 6px solid transparent;
        border-left-color: #fff;
    }

hope this helps..

How to add Dropdown arrow to a li which has child elements

I will provide two solutions to the problem.

1). Javascript solution. Using jQuery you can achieve it pretty easy:

$('a + ul').prev('a').append('<span class="parent">▼</span>');

Demo: http://plnkr.co/edit/37k1KMpqJ6G2tPrvprBa?p=preview

2). CSS only solution. Using modern pseudo selectors you can do this:

li a:not(:only-child):after {
    content: '\25bc';
}

Additional info: :only-child and :not selectors. Support: IE9+.

Note: CSS solution is not equivalent to javascript one, as it doesn't insert span.parent element in DOM.

Demo: http://plnkr.co/edit/sfoctCWzjRCBlXG9dVyD?p=preview

Adding a css class to all List elements if a class is inside with jQuery or JS

Using jquery you can check whether the li has child (ul) or not, and then add the class.

$('li:has(> ul)').addClass('arrow');

Check if li has ul

You need to update your LESS to (please note I've updated the font & content so I didn't have to import glyphs font):

ul {
    padding:20px 0 0 0;
    & > li {
            list-style-type: none;
            & > a:not(:last-child):after {
                margin-top:3px;
                content:">";
                font-family:'arial';
                text-align:right;
                font-size: 10px;
                float:right;
            }
        }
    ul {
        padding: 0;
        margin-left: 13px;
    }
}

Note that the ">" is at the far right hand side of the output window.
See working example here:
https://jsfiddle.net/6duxLkc4/