Transparent navigation/menu bar

Question

good day!

so im working on a certain parallax website, newbie here aneways. The problem is i want my navigation bar to be transparent just like this site : http://www.xplaye.com/en/ i tried using opacity and background :transparent but it does not work at all m.

anyone who has an idea? answers are greatly appreciated. thanks a lot CHEERS!

heres my css :

.nav{

    height: 40px;
    width:auto;

}

.nav ul li{
    list-style:none;
    text-decoration:none;
    display: inline-block;
    padding: 10px;
    padding-right:20px;
    float: right;
    }
.nav ul li a { 
    text-decoration: none;
    color:#FFF;
    font-family:Calibri;
    }
.nav ul li a:hover {
    color: #6be0d6;}
.nav ul li a:active{
    color: #6be0d6;
    }

Answer 1

Thanks everyone i don't know what exactly happen but when i applied this code it turns out OK :)

.nav{
    height: 40px;
    width:auto;
    height: 40px;
    width:auto;
    position:fixed;
    z-index: 100;
}

Answer 2

What do you mean by transparent? You can just delete background-color in css.

If you mean SEMI-TRANSPARENT, use rgba value:

background: rgba(0,0,0,0.3);

fiddle

Answer 3

change

.nav{
    background-color: black;
    height: 40px;
    width:auto;
}

to

.nav{
    background-color: rgba(0,0,0,0);
    height: 40px;
    width:auto;
}

this will create a background color wich is black but has zero opacity