how to create a box that hovers above existing text?

I am creating a dvd catalog website with a database of dvd images and informations such as titles/genre开发者_Python百科/year etc.

I need to create a text "Sort By". When you hover this word "Sort By", a box will appear just below "Sort By" and have several text hyperlinks such as "Title", "Genre", "Year" appearing. This box should overlap any existing images/texts on the website.

Is there a simple way to implement this?

Here's how to do it with CSS only:

The HTML:

<div class="container">
<p>Sort By</p>

<ul>
    <li>title</li>
    <li>date</li>
    <li>artist</li>
</ul>
</div>

The CSS:

.container ul {
display: none;       
}
.container:hover ul{
display: inline;  /* or block or whatever you need */
}

Here's an example: http://jsfiddle.net/9QbGn/8/ (just hover over "sort by")