html - 将鼠标悬停在文本超链接上时显示图像，但需要更改图像相对于每个链接的位置

Question

在我的网站上，我有文本超链接，当我将鼠标悬停在它们上面时，链接下方的行上会出现一个小缩略图。

--在以下页面中找到的示例:http://synapsecomic.com/synapse_archive.html --.

初始代码在这里找到:Display Image On Text Link Hover CSS Only .

现在，如果可能的话，我想对其进行调整，如下所述。为此，我仅使用 HTML 和 CSS:

HTML:

1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, (...), 
<a href="synapse_author.html">24,
<div><img src="comic_images/Panels/Master_List/synapse_00001.gif" width="150" height="100"   />
</div></a> 
25<br /><br />

<a href="synapse_author.html">26,
<div><img src="comic_images/Panels/Master_List/synapse_00000.gif" width="150" height="100" />
</div></a>
27, 28, 29, 30, 31

CSS:

a>div { display: none; }
a:hover>div { display: block; position:absolute; border: 5px solid #FFF;}

如果将鼠标悬停在链接 26 上，缩略图会直接显示在链接下方，这很好。我的问题是，当您将鼠标悬停在指向 24 的链接上时，缩略图显示为沿左侧对齐，而不是在文本下方对齐。这可能也是所有其他页面的问题(只是还没有将它们中的任何一个变成链接)。有没有办法让缩略图直接显示在它所附加的链接下方？

如果可能，请用通俗易懂的语言解释您的答案。我对编码仍然很陌生(老实说，我很惊讶我已经做到了这一点)。感谢您的帮助，如有必要，我会澄清我的任何解释。

Answer 1

为什么不多采用一种方法like this它不会在 anchor 标记中嵌套 block 元素(不理想..)

HTML:

<ul>
    <li>
        <a href='#'>Item 1</a>
        <ul>
            <li>
                image 1
            </li>       
        </ul>
    </li> 
    <li>
        <a href='#'>Item 2</a>
        <ul>
            <li>
                image 2
            </li>       
        </ul>
    </li>     
</ul>

CSS:

ul, li{
    list-style:none;
    margin:0;
    padding:0;
}
ul ul{
    display:none;
}
ul li{
    position:relative;
    display:inline;
}
ul li:hover ul{
   display:block;
   position:absolute;
}