I am trying to get a drop-down menu within an image so when a user hovers over one area they will be presented with a list and when they go over to another area they will be presented with another different list of options. Think a map of the world where the user can hover over individual countries and be presented with a dropdown list. I have the following code and it is nearly what I want but the dropdown list is outside of the image so the users are unable to select anything.
Any help greatly appreciated.
.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>
you can try to make the position on .dropdown and .dropdown-content to absolute and then move the single elements in the html like so:
<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>