Не отображается элемент nav.menu:before

body{
width: 100%;
height: 100%;
background: #48a37d;
}

nav.menu {
width: 960 px;
margin: 0 auto;
}
nav.menu:before {
content: '';
display: block;
height: 50 px;
width: 100%;
position: absolute;
background: #4ac1f0;
left: 0;
top: 0;
z-index: -1;
}

nav.menu ul {
list-style: none; 
margin: 0;
padding: 0;
height: 50px;
}

nav.menu ul li {
float: left;
}

nav.menu a {
color: #fff;
display: block;
height: 50px;
padding: 0 30px;
text-transform: uppercase;
text-decoration: none;
line-height: 50px;
}

nav.menu ul li a:hover {
background: #96ebc2;
}

    <nav class="menu">
        <ul>
            <li><img src="TEMP/png/logo.png" alt="Sprite" width="100" align=""></li>
            <li><a href="#">Главная</a></li>
            <li><a href="#">Состав</a></li>
            <li><a href="#">Описание</a></li>
            <li><a href="#">Фотографии</a></li>
            <li><a href="#">Контактная информация</a></li>
        </ul>
    </nav>