Adding arrow to existing menu - css

Question

Here is my css code where i want to add arrow-down.gif for the menu have child items.
Css : MyCSSMenu Core CSS [Do Not Modify!]
.qmmc .qmdivider {
display:block;
font-size:1px;
border-width:0px;
border-style:solid;
position:relative;
z-index:1;
}
.qmmc .qmdividery {
float:left;
width:0px;
}
.qmmc .qmtitle {
display:block;
cursor:default;
white-space:nowrap;
position:relative;
z-index:1;
}
.qmclear {
font-size:1px;
height:0px;
width:0px;
clear:left;
line-height:0px;
display:block;
float:none !important;
}
.qmmc {
position:relative;
zoom:1;
z-index:10;
}
.qmmc a, .qmmc li {
float:left;
display:block;
white-space:nowrap;
position:relative;
z-index:1;
}
.qmmc div a, .qmmc ul a, .qmmc ul li {
float:none;
}
.qmsh div a {
float:left;
}
.qmmc div {
visibility:hidden;
position:absolute;
}
.qmmc li {
z-index:auto;
}
.qmmc ul {
left:-10000px;
position:absolute;
z-index:10;
}
.qmmc, .qmmc ul {
list-style:none;
padding:0px;
margin:0px;
}
.qmmc li a {
float:none
}
.qmmc li:hover>ul {
left:auto;
}
#qm0 ul {
top:100%;
}
#qm0 ul li:hover>ul {
top:0px;
left:100%;
}
#qm0 a {
padding:5px 4px 5px 5px;
color:#7a7a7a;
/*font-family:Arial;*/
font-size:14px;
font-weight:bold;
text-decoration:none;
background:url(../images/nav-bg.gif) left top repeat-x;
height:30px;
line-height:33px;
}
#qm0 div, #qm0 ul {
padding:2px;
margin:-2px 0px 0px;
background-color:#f7f7f7;
border-width:1px;
border-style:solid;
border-color:#7a7a7a;
}
#qm0 div a, #qm0 ul a {
padding:3px 10px 3px 5px;
background-color:#7a7a7a;
font-size:14px;
border-width:0px;
border-style:none;
height:20px;
line-height:23px;
background:url(../images/nav-bg.gif) left top repeat-y;
color:#7a7a7a;
}
#qm0 div a:hover, #qm0 ul a:hover {
background-color:#cdcdcd;
color:#7a7a7a;
}
body #qm0 div .qmactive, body #qm0 div .qmactive:hover {
background-color:#7a7a7a;
color:#cc0000;
font-weight:bold;
}
#qm0 .qmtitle {
cursor:default;
padding:3px 0px 3px 4px;
color:#7a7a7a;
/*font-family:arial;*/
font-size:14px;
font-weight:bold;
}
#qm0 .qmdividerx {
border-top-width:1px;
margin:4px 0px;
border-color:#bfbfbf;
}
#qm0 .qmdividery {
border-left-width:1px;
height:15px;
margin:4px 2px 0px;
border-color:#555;
}
#qm0 .qmritem span {
border-color:#dadada;
background-color:#f7f7f7;
}
#qm0 .qmritemcontent {
padding:0px 0px 0px 4px;
}
html :
<ul id="qm0" class="qmmc">
<li>Home
</li>// no arrow here
<li><a class="qmparent" href="#" title="News">News</a> //here the arrow should appear
<ul>
<li>Coastal News
</li>
<li>State News
</li>
<li>National News
</li>
</ul>
</li>
<li><a class="qmparent" href="#" title="Features">Features</a> //here the arrow should appear
<ul>
<li>Editorial
</li>
<li>Special Report
</li>
</ul>
</li>
The code is taken from mycssmenu

Answer 1

EDIT: To show the arrows not only on hover, remove the :hover-pseudo class. I updated the fiddles, too.
Pure CSS way
You can solve this with CSS only using the border property like this (fiddle):
.qmmc > li {
margin-right: 12px;
}
.qmmc > li.has-sub:after {
display: block;
position: absolute;
content: '';
width: 0;
height: 0;
top: 50%;
right: -12px;
border-style: solid;
border-width: 6px 6px 0 6px;
border-color: #000 transparent transparent transparent;
}
Using Background image
You can add the image like this (fiddle)
.qmmc > li {
margin-right: 12px;
}
.qmmc > li.has-sub:after {
display: block;
position: absolute;
content: '';
width: 12px;
height: 100%;
top: 0%;
right: -12px;
background: url(PATH/TO/IMAGE/arrow-down.gif) no-repeat center center;
background-size: contain;
}
Using CSS only would be the cleaner, more modern approach.

Answer 2

An elegant CSS only solution will be to use pseudo elements.
Adding this to your CSS will do exactly what you want:
.qmmc li > a:after {
margin-left: 4px;
content: url(link/to/right-arrow.png);
} /* This will be used when you have sub-sub-menus*/
.qmmc > li > a:after {
margin-left: 4px;
content: url(link/to/down-arrow.png);
} /* This will be used when you have sub-menus*/
.qmmc li > a:only-child:after {
margin-left: 0;
content: '';
} /* This will be used when you have no sub-menus*/
You can change the content to '\25BA' and '\25BC' in 1st and 2nd definitions respectively to get nice arrows without using images. See a DEMO here, see that I have added a further sub-menu to "Costal News" sub-menu item for demonstration.