将鼠标悬停在列表中的项目上时显示菜单

时间:2012-07-20 21:52:14

标签: javascript html css

我的网页导航栏上有一个ul列表,其编写方式如下:

<ul id="nav">
<li><a href="index.htm" title="Home">Home</a></li>
<li><a href="project.htm" title="Project">Project</a></li>
<li><a href="sample.htm" title="Sample">Sample</a></li>
</ul>

将鼠标悬停在ul列表上时,项目的颜色会发生变化。

ul#nav li a:link,ul#nav li a:visited {color:#333333;text-decoration:none;}
ul#nav li a:hover,ul#nav li a:active {color:#a61607;text-decoration:none;}

但是,当用户将鼠标悬停在sample个元素上时,我会显示一个图形菜单。菜单类似于以下内容(箭头和三个超链接的一个图像):

               hyperlink 1
Arrow image /_ hyperlink 2
            \  hyperlink 3

如何将鼠标悬停在sample列表中的ul项目上,以菜单的形式显示此箭头图片和超链接?

1 个答案:

答案 0 :(得分:0)

这是一个小提琴,我觉得它可以按照您的需要运作。

http://jsfiddle.net/Ne227/1/