Menu Css

[C2am]

Hola

Bueno, un poco de ayuda:

1º - El código que usa, de araudi.net, aunque muy bueno en su tiempo, como que ha quedado un poco desactualizado (fijate que aún tiene soporte para IE6). Además tiene cosas que no necesitas.

2º- te dejo un ejemplo de como podría ser, pero me parece que podría mejorarse mucho más.
Uso un contenedor "imagen" que contendrá la imagen y el menu respectivo:

Código HTML:

<div class="imagen">
<div class="menu">
    <span class="flecha">&darr;</span>
    <ul>
        <li>
            <a class="primera" href="#">Ver online</a></li>
        <li>
            <a href="#">Descargar</a></li>
        <li>
            <a href="">Cancelar</a></li>
    </ul>
</div>
    <img src="http://brandonqr.com/images/penny-dreadful-poster-2-2.jpg" width="300px"/>
</div>
 

Su css:

Código CSS:

*{margin:0; padding:0}
.imagen{
    display:inline-block;
}
.menu {
    width: 240px;
    height: 320px;
    background-image: url('../Erase_una_vez_Serie_de_TV-526092991-large.jpg');
    font-size: 0.7em;
    margin: 20px;
    position: absolute; top:0, left:0}
 
.flecha{display:inline-block; width: 24px;height: 23px;border-radius:24px; background:#000; color:#fff; text-align:center; font-size:18px;position:relative;cursor: pointer;
}
 
.menu ul {display:none;background:#000}
 
.flecha:hover + ul{display:block;}
 
.menu ul:hover{display:block;}
 
.menu ul { list-style-type: none; border:1px solid #fff}
.menu ul li, .menu ul li a{height:25px;}
.menu ul li a {display: block; text-decoration: none;color: #f5f5f5; position: relative; text-align: center;}
.menu ul li a:hover {background-color: #6CC;color: #000;position: relative;}
 

Y aquí el ejemplo:
http://jsfiddle.net/c2am/tKgLf/57/embedded/result/