html - CSS imgBox 链接不工作

Question

我正在尝试为我的站点编写导航栏代码，但是一旦我实现了 css imgBox，我的链接就停止工作了。它们在同一个目录中，所以我不认为这是问题所在，但对于我来说，我无法弄清楚出了什么问题这是 HTML 代码

<ul id="menu">
    <li> <div class="imgBox"  id="img1"> <a href="index.html"> </a> </div> </li>
    <li> <div class="imgBox"  id="img2"> <a href="Media.html"> </a> </div> </li>  
    <li> <div class="imgBox"  id="img3"> <a href="social-media.html"> </a> </div> </li>
</ul>

这是CSS

.imgBox
{
    float:left;
    border: 1px solid #9325BC;
}
#img1
{
    background: url(images/home.png) no-repeat;
    width: 129px;
    height: 50px;
}

#img2
{
    background: url(images/media.png) no-repeat;
    width: 112px;
    height: 50px;
}

.imgBox:hover
{
    -moz-box-shadow: 0 0 30px #0000cc;
    -webkit-box-shadow: 0 0 30px #0000cc;
    box-shadow: 0 0 30px #0000cc;
}

任何帮助将不胜感激

Answer 1

您必须关闭所有打开的标签。链接标签和 div 标签。此外，如果您希望您的链接可见，它必须至少包含一个词或图像。

<ul id="menu">
    <li><div class="imgBox"  id="img1"> <a href="index.html">Index</a> </div> </li>
    <li> <div class="imgBox"  id="img2"> <a href="Media.html">Media</a> </div></li>  
    <li> <div class="imgBox"  id="img3"> <a href="social-media.html"> Social media</a></div></li>
</ul>