问题描述
我正在建立一个网站（ ），并且我的顶部水平导航是由彼此相邻的图像组成。
我希望“商店”按钮显示一个下拉菜单。 下拉菜单理想情况下是彼此相邻的2或3张图像，它们是指向其他页面的链接。 因此，当有人单击SHOP时，3个图像会彼此相邻排列，例如链接到图案，缝制产品，钩针产品。
在我的脑海中听起来很轻松，但是我找不到我需要的东西。 我不是代码编写者，但是我非常擅长阅读和实现它们，甚至调整它们。
1楼
为什么不从这个组件“ ”开始？
这是一个 （可编辑）。
对于外部文件，这将需要：
- jQuery Includes（在线托管， ）
- Bootstrap Include（在线托管， ）
履行
包括（在<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>