html - 链接上的悬停菜单出现问题

Question

我正在尝试获取一个包含图像的链接 ( <a></a> )，当该链接悬停在其上方时，悬停菜单出现在它下方(在本例中，只有一个按钮)。出现的按钮，我希望上面有一个链接。

HTML:

<a href="#">
  <img src="My_Image.jpg" width="420" height="280" />
  <ul>
      <a><li>Buy</li></a>
  </ul>
</a>

CSS:

a {
  padding: 5px; margin: 0px;
  position: relative;
  display: inline-block;
}
a ul{
  padding: 0px; margin: 0px;
    list-style: none;
    position: absolute;
    left: -9999px;
  width: 100%;
}
a ul li{
  padding: 5px;
  background-color: black;
  white-space: nowrap;
  text-align: center;
}
a:hover ul {
  left: 0;
}

我的麻烦是，当我在 a 中添加链接 ( ul ) 标签时标记 ul 的 css 格式它的所有后代都不再接受了。我希望这已经足够清楚了，如果您需要我进一步解释，请告诉我。

Answer 1

从您对 Adrian 的第一条评论开始，您希望链接文本显示在图片上方，将鼠标悬停在图片上时，购买按钮将显示在图片下方。假设这样，这可能有效:

div {
    padding: 5px; margin: 0px;
    position: relative;
}
div ul{
    list-style: none;
    display: inline-block;
}
div ul li{
    padding: 5px;
    white-space: nowrap;
    text-align: center;
    margin-bottom: 10px;
}
div ul li a{
    position: relative;
}
div ul li a span{
    position: absolute;
}
div ul li button{
    visibility: hidden;
}
div ul li:hover button{
    visibility: visible;
}

HTML 类似于:

<div>
  <ul>
      <li><a href="#"><img src="My_Image.jpg" width="420" height="280" /><span>Description</span></a>
        <br/><button>Buy Image 1</button>
      </li>
      <li><a href="#"><img src="My_Image.jpg" width="420" height="280" /><span>Description</span></a>
        <br/><button>Buy Image 2</button>
      </li>
  </ul>
</div>