鏈接上的懸停菜單出現問題

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標籤內標籤的CSS格式的ul及其所有後代不要不再接受了。我希望這已經夠清楚了，讓我知道你是否需要我解釋一些。

Answer 1

從阿德里安你的第一個評論，你想要的鏈接文本顯示在圖像的頂部，並在圖像上方懸停時，圖像下方會顯示購買按鈕。假設，這可能工作：

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> 

Answer 2

您的語法不正確。內聯元素中的塊元素被規範禁止。 如果你需要創建一個基於菜單的列表中，將「子菜單中的」鏈接標籤後：

<ul> 
     <li> 
      <a href="#">Your Link</a> 
      <ul> 
       <li><a href="#">Sublink</a></li> 
      </ul> 
     </li> 
</ul>