css - 向现有菜单添加箭头

Question

这是我的 css 代码，我想为菜单添加 arrow-down.gif 有子项。

Css: MyCSSMenu 核心 CSS [请勿修改!]

 .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>

代码取自mycssmenu

Answer 1

编辑:要不仅在悬停时显示箭头，请删除 :hover-伪类。我也更新了 fiddle 。

纯CSS方式

你可以用 CSS 解决这个问题，只使用像这样的 border 属性(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; 
}

使用背景图片

您可以像这样添加图像 ( 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;
 }

仅使用 CSS 将是更简洁、更现代的方法。