我正在创建一个网站 ( Boys and Bunting )，顶部有一个水平导航，由彼此相邻的图像组成。
我希望“商店”按钮显示下拉菜单。下拉菜单最好是 2 或 3 个相邻的图像，它们是其他页面的链接。因此，当有人点击“商店”时，3 个图像会并排出现，链接到图案、缝制产品、钩针产品等。
在我看来，这听起来很简单，但我找不到我需要的东西。我不是代码编写者，但我非常擅长阅读和实现它们，甚至调整它们。
最佳答案
为什么不从这个Bootstrap开始呢？组件“DropDown Button”？
这是一个JSFiddle example (可编辑)。
对于外部文件，这将需要:
- JQuery 包含(在线托管，link is here)
- Bootstrap 包含(在线托管，links are here)
实现
包括(在 <head> 标签内):
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
如果这些内容已过时，请继续包含最新的内容(希望它们始终可以在线获取)。
核心代码(包含 3 张照片和网站链接的下拉列表):
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Shop
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<a href="stackoverflow.com">
<img src="https://www.petfinder.com/wp-content/uploads/2012/11/140272627-grooming-needs-senior-cat-632x475.jpg" width="40px" height="40px" />
</a>
<a href="stackoverflow.com">
<img src="http://i.huffpost.com/gen/964776/images/o-CATS-KILL-BILLIONS-facebook.jpg" width="40px" height="40px" />
</a>
<a href="stackoverflow.com">
<img src="http://i.ytimg.com/vi/mSFTRoBY99s/hqdefault.jpg" width="40px" height="40px" />
</a>
</ul>
</div>
关于javascript - 图像悬停时的下拉菜单(由图像组成)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31874202/