Question

我希望有一个标识（简单说它是正方形），有4个链接，当它被鼠标悬停时弹出。这些将位于菜单/徽标的上方，下方和侧面。

只有CSS可以实现吗？关于如何做到这一点的任何建议？

从语义上讲，我想在页面中订购它们：

<ul><li><a href="Homepage">Logo</a>
    <ul><li class="north"><a href="north">North</a></li>
        <li class="west"><a href="west">West</a></li>
        <li class="east"><a href="east">East</a></li>
        <li class="south"><a href="south">South</a></li>
     </ul>
    </li>
</ul>

但是让它们显示在页面上：

             North
       West  Logo   East
             South

Answer 1

是

HTML

<ul><li><a href="Homepage">Logo</a>
    <ul id="map"><li class="north"><a href="north">North</a></li>
        <li class="west"><a href="west">West</a></li>
        <li class="east"><a href="east">East</a></li>
        <li class="south"><a href="south">South</a></li>
     </ul>
    </li>
</ul>

CSS

#map li a {
    display: none;
}

#map li:hover a {
    display: block;
}

请注意，除了链接之外，IE6不会触发:hover伪类（您可能想要更改标记）。

还可以使用绝对定位来定位弹出窗口。

查看一般概念here。

CSS只有菜单弹出？

1 个答案:

HTML

CSS