Adding arrow to existing menu

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><a href="/" title="Home Page">Home</a>
</li>// no arrow here
<li><a class="qmparent" href="#" title="News">News</a> //here the arrow should appear
    <ul>
        <li><a href="/news.php?cid=1" title="Coastal News">Coastal News</a>
        </li>
        <li><a href="/news.php?cid=2" title="State News">State News</a>
        </li>
        <li><a href="/news.php?cid=3" title="National News">National News</a>
        </li>
    </ul>
</li>
<li><a class="qmparent" href="#" title="Features">Features</a> //here the arrow should appear
    <ul>
        <li><a href="/news.php?cid=7" title="Editorial">Editorial</a>
        </li>
        <li><a href="/news.php?cid=8" title="Special Report">Special Report</a>
        </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.