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

优雅的CSS解决方案是使用伪元素。

将此添加到CSS中将完全符合您的要求：

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

您可以分别在第1和第2个定义中将content更改为'\25BA'和'\25BC'，以获得不使用图像的漂亮箭头。查看DEMO here，看到我在“Costal News”子菜单项中添加了更多子菜单以进行演示。

Answer 2

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

纯CSS方式

你只能使用像这样的fiddle}：

这样的border属性来解决这个问题

.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将是更清洁，更现代的方法。

将箭头添加到现有菜单

2 个答案:

纯CSS方式

使用背景图片