Css 向现有菜单添加箭头

这是我的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

一个优雅的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*/

---

您可以将第一个和第二个定义中的

内容分别更改为
'\25BA'
和
'\25BC'
，以获得漂亮的箭头，而无需使用图像。请参见a，请参见我为“Costal News”子菜单项添加了另一个子菜单以进行演示。
编辑：要不仅在悬停时显示箭头，请删除
：hover
-伪类。我也更新了小提琴

纯CSS方式
您可以使用CSS解决这个问题，只需使用如下（）的border属性：

使用背景图像
您可以像这样添加图像（）

仅使用CSS将是更干净、更现代的方法。
您能修复CSS使其易读吗…？向具有子菜单（
）的
元素添加一个类，并将其称为“子菜单”。在css.子菜单{background:url（path_to_img/arrow down.gif）0 0 no repeat}中，这会将箭头放在元素左上角具有“sumbenu”类的
元素上。这两种方法都不适用于我。我用的是G.chrome。仅当存在子菜单时，该箭头才会出现。在盘旋之前。谢谢，看起来不错。1） 当鼠标移到菜单上（主页、新闻、功能等）时，是否可以设置不同的颜色2）当菜单下拉时，是否可以显示向上箭头^sign@DilDilshan，这两者都是可能的，请查找：hover伪类：
.qmmc>li ul li:hover{background:#ccc/*insert bg color code*/}
这将更改悬停元素的背景颜色
.qmmc>li.has sub:hover:after{border style:solid；border width:0 6px 6px 6px；border color:transparent transparent#000 transparent}
这将启用向上箭头。您好，我更新了您的小提琴，但没有显示任何内容。您好，我想我在使用css代码时遇到问题，不得不更改css。现在，菜单包含了我需要添加下拉列表[code]#header.nav{float:left；}header.nav li{float:left；}header.nav li a{float:left；font size:15px；color:#7a7a7a；文本装饰：无；字体重量：粗体；文本装饰：无；高度：35px；行高：33px；填充：10px 15px；}header.nav li:hover{background（../images/nav bg.gif）左上重复-x；颜色：#8ac404；}header.nav li a.current{背景：url（../images/nav bg.gif）左上重复-x；颜色：#8ac404；}[/code]您好，它可以工作，但以前的背景色和菜单色不会显示。@Dildishan我在没有解决方案的情况下尝试了您的代码，但无法确定您指的是哪种背景色..您可以编辑我的小提琴或创建一个新的小提琴来准确演示..我将尝试更新我的解决方案以适应..您好，谢谢它可以工作：）1）鼠标悬停在菜单上时是否可以设置不同的颜色（主页、新闻、功能…）2）也可以在菜单下拉时显示箭头^sign您可以在CSS中添加类似于
ul li:hover{background color:#dededede；}
的内容，以便在悬停时更改背景颜色。希望这有帮助。嗨，我更新了你的小提琴，背景颜色改变了，但字体颜色没有变化。ul-li:hover{background color:#f3；color:#000000；}
.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; 
}

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