Posicionar seta por cima de degradê css3

[Marcos Coelho2 2]

Tenho um botão em degradê que so aparece ao passar o mouse, e tenho que colocar uma seta feita com bordas em cima desse botão mas nao funciona.

Css da seta

.seta{
width:0;
   height:0;
   border:6px solid transparent;
   float: right;
        border-top-color:#fff; 
     z-index:10;}

 

esse z-index coloquei para tentar posicionar por cima mas também não deu.

 

Css do meu botão

 

.topbusca .bgbusca .megamenu{
 float:left;
 width:105px;
  height:47px;
   margin-top:-1px;


}

.topbusca .bgbusca .megamenu a{
background:url(http://pacoesportes.com/skin/frontend/galaeva/default/images/megamenu.png) right center no-repeat;
 width:120px;
  height: 47px;
   display: inline-block;
color: #FF6600;
 display: inline-block;
 font-size: 14px;
 font-weight: bold;
 line-height:40px;
text-align:left;
text-indent: 36px;
 text-decoration: none;
margin-top:-2px;



}


.topbusca .bgbusca .megamenu :hover{
width:120px;
height:40px;
background: #2f3842; /* Old browsers */
background: -moz-linear-gradient(top,  rgba(118,119,120,1) 0%, rgba(47,56,66,1) 90%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(118,119,120,1)), color-stop(90%,rgba(47,56,66,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(118,119,120,1) 0%,rgba(47,56,66,1) 90%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(118,119,120,1) 0%,rgba(47,56,66,1) 90%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(118,119,120,1) 0%,rgba(47,56,66,1) 90%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(118,119,120,1) 0%,rgba(47,56,66,1) 90%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#767778', endColorstr='#2f3842',GradientType=0 ); /* IE6-9 */


border:1px solid #888;
margin:10px auto;
padding:0px auto;
-moz-border-radius:7px;
-webkit-border-radius:7px;
-ms-border-radius:7px;
-o-border-radius:7px;
border-radius:7px 7px 0px 0px;
margin-top:8px;

}

 

E assim esta no head do meu site chamando essas divs

 

<div class="megamenu">

<a href="a">a
</a>
<div class="seta">
</div>
</div>

 

 

Link do site: http://pacoesportes.com/

 

Vejam como a seta está posicionada em baixo do menu que é o que está embaixo da logo.

 

Irei postando oq estou tentando fazer.

 

Meu código html agora está dessa forma.

<div class="megamenu">

<a href="a">
<span class='style-menutop-cp'>Comprar por</span>
<span class='style-menutop-dp'>Categorias</span>
<span class='seta'></span>


</a>


</div>

 

To tentando através do "span" acho que vai funcionar dessa forma mas não consigo posicionar corretamente na div.

 

css

 

.seta{
width:0;
   height:0;
   border:6px solid transparent;
   float:right;
   border-top-color:#fff; 
   }

.style-menutop-cp { text-align:left; text-decoration: none; clear:left; color: #000; font-size:13px;}


.style-menutop-dp { text-decoration: none; clear:left; color: #000; font-weight: bold;font-size:15px; margin-top:-130px; }

 

deem uma olhada no link que passei no primeiro post para ver o erro que ta dando.

 

funcionou quase tudo...

faltando apenas passar o posicionamento da div antes de passar o mouse para o mesmo posicionamento de quando se passa o mouse.

[Dusigner 0]

Cara!

 

Tente mudar a ordem das tag no html:

 

<a href="a">
<span class="seta"></span>
<span class="style-menutop-cp">Comprar por</span>
<span class="style-menutop-dp">Categorias</span>
</a>

 

E no CSS é só posicionar a seta:

 

seta {
border: 5px solid transparent;
position: relative;
top: 15px;
left: 85px;
border-top-color: #2F3842;
}