CSS继承样式

Question

我有这个下拉菜单，我正在使用CSS来“突出显示”我正在盘旋的项目。我的问题是我只想在具有下拉类别的项目上显示此向下箭头，下面是我在HTML中调用它的方式。我给了它'subitem'标签。所以我创建了以下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);

}

Answer 1

将您的#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 */

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

Answer 2

您必须为.subitem重复悬停样式：悬停样式

#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;