Question

I have this dropdown menu and I’m using CSS to “highlight” the items i’m hovering over. My question is I want to display this down arrow only on items that have a drop-down category, below is how i’m calling it in HTML. I gave it the ‘subitem’ tag. So I created the following CSS to display the arrow. The problem is the .subitem property overwrites the general hover property so i’m only seeing the arrow when I hover over it, is there a way that I can see both?

#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

You have to repeat hover style like below for your .subitem:hover style

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

}

if you look carefuly, the trick is to set two images in same css property

background: <image1>, <image2>;

which means

background: -moz-linear-gradient(top,  #828a91 0%, #636363 100%), url(images/arrow2.png) no-repeat;