Question

我正在尝试创建一个基本菜单，在:hover上的菜单顶部显示“帽子”边框

边框不是直线，但在中心有一个（圆）凹凸，并且显示为如此（基本上像帽子）：__/\__ ，当它出现在更大的菜单名称上时，它看起来像这样：_____/\_____

我希望此边框显示在每个菜单元素上方，但相应地调整其水平线的大小。这是否可以不必使用大量图像[即。是每种菜单大小的图像，还是必须将所有菜单项替换为图像]或（很多）CSS3？

典型的菜单代码如下：

<ul id="nav">
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Services</a></li>
  <li><a href="#">News</a></li>
  <li><a href="#">Contact</a></li>
</ul>

Answer 1

将:after伪和CSS三角形设置为position: absolute;

Demo（将鼠标悬停在菜单上以查看所需效果）

说明：我在这里使用:after伪，这将创建一个虚拟元素，并将其设置为position: absolute;，而不是使用bottom和left属性定位将在:hover上显示的三角形。确保使用content: "";这一点非常重要，如果您要创建一个装订线，这不会在元素上创建一个装订线，而不是您可能需要clip属性。

#nav {
    height: 30px;
    background: #999;
}

#nav li {
    display: inline-block;
    margin-left: 20px;
    line-height: 30px;
    color: #fff;
    position: relative;
}

#nav li a {
    color: inherit;
    text-decoration: none;
}

#nav li:hover:after {
    content: "";
    width: 0; 
    height: 0;
    border-bottom: 4px solid #fff;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    position: absolute;
    left: 50%;
    margin-left: -2px;
    bottom: 0;
}

CSS / HTML：菜单项悬停时的动态“帽子”边框

1 个答案: