0

我正在尝试创建一个基本菜单，在菜单顶部显示一个“帽子”边框: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>
4

1 回答 1

1

使用:after伪以及 CSS 三角形设置为position: absolute;

演示（悬停菜单查看所需效果）

说明：我:after在这里使用 pseudo ，它将创建一个虚拟元素，并将其设置为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;
}
于 2013-10-15T10:06:08.737 回答