图像上的下拉菜单答案

【问题标题】：Dropdown Menu on Image图像上的下拉菜单
【发布时间】：2021-08-24 14:58:28
【问题描述】：

我正在尝试在图像中获取下拉菜单，因此当用户将鼠标悬停在一个区域上时，他们将看到一个列表，而当他们转到另一个区域时，他们将看到另一个不同的选项列表。想象一张世界地图，用户可以将鼠标悬停在各个国家/地区上并显示一个下拉列表。我有以下代码，这几乎是我想要的，但下拉列表位于图像之外，因此用户无法选择任何内容。

非常感谢任何帮助。

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: relative;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 99;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {background-color: #ddd;}

.dropdown:hover .dropdown-content {display: block;}

<!DOCTYPE html>
<html>
<img src="https://www.w3schools.com/tags/planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">

<map name="planetmap">
<div class="dropdown">
  <area shape="rect" coords="0,0,82,126" alt="Sun" href="#">
    <div class="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>
  <area shape="circle" coords="90,58,3" alt="Mercury" href="#" data-reveal-id="two">
  <div class="dropdown">
  <area shape="circle" coords="124,58,8" alt="Venus" href="#" data-reveal-id="three">
   <div class="dropdown-content">
    <a href="#">Link 4</a>
    <a href="#">Link 5</a>
    <a href="#">Link 6</a>
  </div>
</map>

【问题讨论】：

标签： html css drop-down-menu dropdown

【解决方案1】：

您可以尝试将 .dropdown 和 .dropdown-content 上的位置设置为绝对位置，然后像这样移动 html 中的单个元素：

<map name="planetmap">
<div class="dropdown">
  <area shape="rect" coords="0,0,82,126" alt="Sun" href="#">
    <div class="dropdown-content" style="transform: translate(-100px, 0);">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>
  <area shape="circle" coords="90,58,3" alt="Mercury" href="#" data-reveal-id="two">
  <div class="dropdown">
  <area shape="circle" coords="124,58,8" alt="Venus" href="#" data-reveal-id="three">
   <div class="dropdown-content" style="transform: translate(-10px, 0);">
    <a href="#">Link 4</a>
    <a href="#">Link 5</a>
    <a href="#">Link 6</a>
  </div>
</map>

【讨论】：

【解决方案2】：

只需向您的 .dropdown-content 类添加一个快速转换

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: relative;
  transform: translate(-95%, -12%);
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 99;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {background-color: #ddd;}

.dropdown:hover .dropdown-content {display: block;}

<!DOCTYPE html>
<html>
<img src="https://www.w3schools.com/tags/planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">

<map name="planetmap">
<div class="dropdown">
  <area shape="rect" coords="0,0,82,126" alt="Sun" href="#">
    <div class="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>
  <area shape="circle" coords="90,58,3" alt="Mercury" href="#" data-reveal-id="two">
  <div class="dropdown">
  <area shape="circle" coords="124,58,8" alt="Venus" href="#" data-reveal-id="three">
   <div class="dropdown-content">
    <a href="#">Link 4</a>
    <a href="#">Link 5</a>
    <a href="#">Link 6</a>
  </div>
</map>

【讨论】：

有没有办法让它动态显示在屏幕上而不是设置值？