html - 在菜单项悬停时创建菱形

Question

我有一个菜单项，当鼠标悬停在它上面时，它会掉落一个橙色框。

.menu > li > a:hover:after {
    position: absolute;
    left: 0px;
    border-style: solid;
    border-color: transparent;
}

但是我试图实现下拉框下方的菱形效果。

我在这里看到一篇链接此 [网站][4] 的帖子，我尝试使用 diamond:after 方法，但结果很糟糕。需要编辑的css部分我已经注释掉了，方便快速引用。如果有人可以提供帮助。

Answer 1

1) 在您的 CSS 中没有 :after 伪元素的声明 (.menu > li > a:hover:after {/* your css */>)。 例如:

.menu > li > a:hover:after {
    content: ""; /* empty content */
    position: absolute;
    bottom: -50px; /* position 50px below the bottom of the menu link */
    left: 0px;
    border-style: solid;
    border-color: transparent;
    border-width: 0px 60px; /* diamond has 60px to the left and to the right of the midpoint, so the menu item should be 120px width */
    border-top: 50px solid #FF6E0D;
}

此方法要求您指定菜单项的宽度，因为您希望菱形横跨整个链接底部。 (使用左/右 border-width。)

2) 要使用这个方法，你应该添加 position: relative; 到 .menu > li > a 声明，因为 :after 伪元素需要这个定位自己。