下面是一个具有用户照片的站点图像，它们链接到个人资料，但是在图像上您将看到一个+号，该部分链接以添加朋友。
我想做类似的事情，但我不想单击加号作为链接，而是想单击加号并显示几个链接，有点像下拉列表。
仅仅CSS就能实现这样的功能，还是需要javascript？
alt text http://img2.pict.com/e6/20/e8/1544808/0/screenshot2b28.png
最佳答案
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="css/stylesheet.css" />
<style type="text/css" media="all">
ul li ul {display: none; }
ul li {position: relative;
display: block;
height: 91px; /* the size of the image */
width: 91px;
}
ul li span
{display: block;
position: absolute;
bottom: 0;
right: 0;
border: 1px solid #f90;
background-color: #fff;
color: #000;
z-index: 1000;
width: 1em;
height: 1em;
}
ul li:hover ul
{display: block; /* and style as you require */
position: absolute;
left: 91px; /* moving left by the width of the image for a 'flyout' effect. for drop down, use the height instead */
top: 0;
background-color: #fff;
}
ul li ul li
{display: block;
height: 1.2em;
width: 8em;
}
#xx {background: #fff url(img/xx.jpeg) top left no-repeat;
} /* I figure that it'd make sense to use the id of the user/person represented, you may disagree; amend as you require */
#joanne {background: #fff url(img/joanne.jpeg) top left no-repeat;
}
</style>
</head>
<body>
<div id="wrap">
<ul>
<li id="xx"><span>?</span>
<ul>
<li><a href="#">link 1</a></li>
<li><a href="#">link 2</a></li>
</ul></li>
<li id="joanne"><span>?</span>
<ul>
<li><a href="#">link 1</a></li>
<li><a href="#">link 2</a></li>
</ul></li>
</ul>
</div>
</body>
</html>
这就假设图像列表都是同一列表的一部分，并且您不介意使用普通CSS。同样，这是纯CSS，它依赖于
:hover而不是任何形式的onClick事件。对于onClick，您需要js。我还没有做一个测试案例，但是我认为这应该可行。
测试案例位于：my site。
关于javascript - 做这样的菜单的最佳方法，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/1355185/