如何创建一个悬浮在现有文本之上的框？

Question

我正在创建一个DVD目录网站，其中包含DVD图像和标题/流派/年等信息数据库。

我需要创建一个文本“Sort By”。当您将鼠标悬停在“排序依据”字样时，“排序依据”下方会出现一个框，并出现多个文本超链接，如“标题”，“流派”，“年份”。此框应与网站上任何现有图像/文本重叠。

有一种简单的方法可以实现吗？

Answer 1

以下是仅使用CSS的方法：

HTML：

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

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

CSS：

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

以下是一个示例：http://jsfiddle.net/9QbGn/8/（只悬停在“排序依据”）