1

我有这个下拉菜单，我正在使用 CSS 来“突出显示”我悬停的项目。我的问题是我只想在具有下拉类别的项目上显示这个向下箭头，下面是我如何在 HTML 中调用它。我给了它“子项”标签。所以我创建了以下 CSS 来显示箭头。问题是 .subitem 属性覆盖了一般的悬停属性，所以当我将鼠标悬停在它上面时我只看到箭头，有没有办法可以同时看到两者？

在此处输入图像描述

#cssmenu  > ul > li.subitem 

{
    padding-right:5px;
background: url(images/arrow2.png) no-repeat;

background-position-y: 10%;

}


#cssmenu  > ul  li.subitem:hover

{

background: url(images/arrow2.png) no-repeat;


}

<div id='cssmenu'>
<ul>
   <li><a href='index.html'><span>Home</span></a></li>
    <li class='subitem'><a href='#'><span>Products</span></a>
      <ul>
         <li><a href='#'><span>Product 1</span></a></li>
         <li><a href='#'><span>Product 2</span></a></li>
      </ul>
   </li>

#cssmenu  > ul li:hover{


    padding : 3 px, 1 px;
background: #828a91; /* Old browsers */
background: -moz-linear-gradient(top,  #828a91 0%, #636363 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#828a91), color-stop(100%,#636363)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #828a91 0%,#636363 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #828a91 0%,#636363 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #828a91 0%,#636363 100%); /* IE10+ */
background: linear-gradient(to bottom,  #828a91 0%,#636363 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#828a91', endColorstr='#636363',GradientType=0 ); /* IE6-9 */
 -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 -2px 0 rgba(0,0,0,.25), inset 0 -3px 0 rgba(255,255,255,.2), 0 1px 0 rgba(0,0,0,.1);
    -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 -2px 0 rgba(0,0,0,.25), inset 0 -3px 0 rgba(255,255,255,.2), 0 1px 0 rgba(0,0,0,.1);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 -2px 0 rgba(0,0,0,.25), inset 0 -3px 0 rgba(255,255,255,.2), 0 1px 0 rgba(0,0,0,.1);

}
4

2 回答 2

2

#cssmenu > ul li.subitem:hover将您的规则更改为：

background: #828a91; /* Old browsers */
background: url(images/arrow2.png) no-repeat, -moz-linear-gradient(top,  #828a91 0%, #636363 100%); /* FF3.6+ */
background: url(images/arrow2.png) no-repeat, -webkit-gradient(linear, left top, left bottom, color-stop(0%,#828a91), color-stop(100%,#636363)); /* Chrome,Safari4+ */
background: url(images/arrow2.png) no-repeat, -webkit-linear-gradient(top,  #828a91 0%,#636363 100%); /* Chrome10+,Safari5.1+ */
background: url(images/arrow2.png) no-repeat, -o-linear-gradient(top,  #828a91 0%,#636363 100%); /* Opera 11.10+ */
background: url(images/arrow2.png) no-repeat, -ms-linear-gradient(top,  #828a91 0%,#636363 100%); /* IE10+ */
background: url(images/arrow2.png) no-repeat, linear-gradient(to bottom,  #828a91 0%,#636363 100%); /* W3C */

这使用了这样一个事实，即在CSS3background中，您可以通过用逗号分隔简写定义来指定多个s。这是一个 Web 资源，您可以在其中阅读有关指定多个背景的更多信息：little link。
我希望这有帮助！

于 2012-08-17T22:40:59.407 回答
1

您必须为 .subitem:hover 样式重复如下所示的悬停样式

#cssmenu  > ul  li.subitem:hover
{

padding : 3 px, 1 px;
background: #828a91 url(images/arrow2.png) no-repeat; /* Old browsers */
background: -moz-linear-gradient(top,  #828a91 0%, #636363 100%), url(images/arrow2.png) no-repeat; /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#828a91), color-stop(100%,#636363)),url(images/arrow2.png) no-repeat; /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #828a91 0%,#636363 100%),url(images/arrow2.png) no-repeat; /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #828a91 0%,#636363 100%),url(images/arrow2.png) no-repeat; /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #828a91 0%,#636363 100%),url(images/arrow2.png) no-repeat; /* IE10+ */
background: linear-gradient(to bottom,  #828a91 0%,#636363 100%),url(images/arrow2.png) no-repeat; /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#828a91', endColorstr='#636363',GradientType=0 ); /* IE6-9 */
-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 -2px 0 rgba(0,0,0,.25), inset 0 -3px 0 rgba(255,255,255,.2), 0 1px 0 rgba(0,0,0,.1);
-moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 -2px 0 rgba(0,0,0,.25), inset 0 -3px 0 rgba(255,255,255,.2), 0 1px 0 rgba(0,0,0,.1);
box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 -2px 0 rgba(0,0,0,.25), inset 0 -3px 0 rgba(255,255,255,.2), 0 1px 0 rgba(0,0,0,.1);

}

如果你仔细看，诀窍是在同一个 css 属性中设置两个图像

background: <image1>, <image2>;

意思是

background: -moz-linear-gradient(top,  #828a91 0%, #636363 100%), url(images/arrow2.png) no-repeat;
于 2012-08-17T22:40:06.113 回答