将鼠标悬停在列表中的项目上时显示菜单 [英] Displaying menu on hovering over item in list

问题描述

我在我的网页导航栏上有一个 ul 列表，如下所示：

 < ul id =nav> 
< li>< a href =index.htmtitle =首页>首页< / a>< / li& 
< li>< a href =project.htmtitle =Project> Project< / a>< / li> 
< li>< a href =sample.htmtitle =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 上时，我将显示一个图形菜单。$ c> 
 
 $ b <元素。菜单如下（一个图像的箭头和三个超链接）：
 超链接1 
箭头图像/ _ hyperlink 2 
 \ hyperlink 3 
  
如何显示此箭头图像和超链接以菜单形式，将鼠标悬停在 ul 列表中的示例项目上？
解决方案
这是一个小提琴，它按照你的需要工作。
 
 
 
  http://jsfiddle.net/Ne227/1/  
 
I have a ul list on my web page navigation bar and is written somewhat as the following:
<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>
On hovering the mouse over the ul list, the color of the items changes.
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;}
However, I have a graphical menu to be displayed when the user hovers over sample a element. The menu is something like the following (one image of arrows and three hyperlinks):
               hyperlink 1
Arrow image /_ hyperlink 2
            \  hyperlink 3
How do I display this arrow image and the hyperlinks in the form of a menu, on hovering over the sample item in the ul list?
解决方案
Here is a fiddle, which works as you need it to, I think.

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

                        
这篇关于将鼠标悬停在列表中的项目上时显示菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！