Add triangle before submenu using css

Question

How can i add triangle to the following example Fiddle

I need to remove the parent menu with white background and show triangle to to make it look more like this<

Answer 1

You need to apply a class to the list items that have dropdown divs and then you can apply the pseudo element to that.

Codepen Example

Answer 2

I have tried something by adding extra .arrow_div ans apply css to it, check menuone you will see black arrow, may be this you looking for, better suggestion have a background image which have arrow and set it as you menudiv background

SAMPLE DEMO

Answer 3

Hope this helps, I have commented out some of your css and jquery scripts. Also, added a style at the end please kindly refer this link fiddle

The css I added follows,

.dropdown ul li:first-child > a:after {
 content: '';
 position: absolute;
 left: 30px;
 top: -8px;
 width: 0;
 height: 0;
 border-left: 5px solid transparent;
 border-right: 5px solid transparent;
 border-bottom: 8px solid #028F41;
 }