下面是一张来自网站的图片，上面有用户照片，它们链接到个人资料，但在图片上你会看到一个 + 号，这部分链接用于添加 friend 。
我想做一些类似的事情，但不仅仅是让加号部分成为链接，我想单击加号并显示几个链接，有点像下拉列表。
仅使用 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/