Inserção de lista horizontal em cima de uma imagem. | HTML5 e CSS3 parte 2: posicionamento, listas e navegação

Estou fazendo um html com uma figura com opacity de 0.3, e gostaria de colocar uma lista horizontal em cima dessa figura. Usei o display: inline-block mas não funcionou.

Eis o html:

<!DOCTYPE html>
<html lang="pt-br">
    <head>
        <meta charset="UTF-8">
        <title>GEREM</title>
        <link rel="stylesheet" href="style.css">
    </head>

    <body>
        <header class="titulo-principal">
            <h1>texto</h1>
        </header>

        <img id="banner" src="WDWB7772.jpg">

        <h2>texto</h2>

        <p class="gerente">texto</p>

        <ul class="ramais">
            <li class="ramalger">texto</li>
            <li class="ramalger">texto</li>
            <li class="ramalger">texto</li>
            <li class="ramalger">texto</li>
            <li class="ramalger">texto</li>
        </ul>

    </body>

</html>

Eis o CSS:

.titulo-principal {
    padding-left: 30px;
}
#banner {
    width: 80%;
    opacity: 0.3;
    display: block;
    margin-left: auto;
    margin-right: auto;    
}


.gerente {
    font-style: italic
}

.ramais {

    width: 1200px;
    margin: 0 auto;
    padding: 50px;
}
.ramais li {
    top: 100px;
    display: inline-block;
    text-align: center;
    width: 15%;
    vertical-align: top;
    margin:0 1.5%;
    background: gray;
    margin-top: 10px;
    padding: 10px 15px;
    box-sizing: border-box;

}

.ramalger {
    font-family: "Helvetica";
    font-style: oblique;
    position: absolute;

}
p{
    text-align: center
}