Eliminar parte del fondo/hacer transparente

Question

Estoy haciendo un menú que sigue en la página, y tiene una transparencia del 85%. A medida que avanza por la página o se hace clic en un elemento, aparecerá una flecha debajo del nombre del DIV actual.
Me gustaría que esta flecha sea transparente, por lo que el usuario puede leer lo que hay detrás. Si hago una imagen y la hago transparente, solo muestra lo que está debajo de ella (El menú, obviamente).
Entonces, mi pregunta es, ¿cómo hago que esa parte sea transparente?
Aquí está mi código actual:
HTML:

<div class="menu"> 
    <ul class="navigation"> 
     <li><a href="#home">Home</a></li> 
     <li><a href="#aboutme">About Me</a></li> 
     <li><a href="#portfolio">Portfolio</a></li> 
     <li><a href="#services">Services</a></li> 
     <li><a href="#contact">Contact</a></li> 
    </ul> 
</div> 

CSS:

.menu { 
    position: fixed; 
    width: 100%; 
    height: 60px; 
    background-image: url('images/menubg.png'); 

} 

ul.navigation { 
    list-style: none; 
    text-align: center; 
    font-family: 'Allerta', serif; 
    text-transform: uppercase; 
    font-size: 22px; 
    margin: 0px; 
    padding-top: 19px; 
} 

ul.navigation li { 
    display: inline;  
} 

ul.navigation a { 
    color: #dcdcdc; 
    margin-right: 30px; 
    margin-left: 30px; 
    text-decoration: none; 
    padding-bottom: 35px; 
} 

ul.navigation a:hover { 
    background-image: url('images/hover2.png'); 
    background-repeat: no-repeat; 
    background-position: center; 
} 

Answer 1

Suponiendo flecha transparente es lo que necesita, puede utilizar las siguientes propiedades CSS para lograr cruz transparencia navegador apoyo.

#arrow { 
-khtml-opacity:.50; 
-moz-opacity:.50; 
-ms-filter:”alpha(opacity=50)”; 
    filter:alpha(opacity=50); 
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.5); 
    opacity:.50; 
} 

Answer 2

Si entiendo bien su pregunta, que está tratando de mostrar una imagen con un cierto nivel de transparencia?

Puede utilizar la propiedad CSS opacity, así:

#transparent { 
    background-image: url('images/hover2.png'); 

    opacity: 0.5; 
    filter: alpha(opacity=50); 
} 

JSFiddle example

W3Schools reference link