CSS - 带有悬停指针的导航栏答案

【问题标题】：CSS - Navbar with pointer on hoverCSS - 带有悬停指针的导航栏
【发布时间】：2014-02-13 07:58:53
【问题描述】：

我想制作一个在悬停时有一个向下箭头的导航栏。类似这样：

有没有办法在 CSS 中做到这一点，而不使用箭头作为背景图像并在元素上添加填充？

【问题讨论】：

【解决方案1】：

您可以使用:after 伪元素来创建一个 CSS 三角形并将其绝对定位。

类似这样的：

li.active a:after {
  content: '';
  display: block;
  width: 0;
  height: 0;
  border-top: 6px solid #333;
  border-right: 6px solid transparent;
  border-left: 6px solid transparent;
  position: absolute;
  z-index: 1;
  top: 100%;
  left: 50%;
  margin-left: -3px
}

Demo

【讨论】：

【解决方案2】：

使用<div class="arrow_box">INFORMACION</div>

使用 CSS：

.arrow_box {
position: relative;
background: #88b7d5;
border: 1px solid #c2e1f5;
}
.arrow_box:after, .arrow_box:before {
top: 100%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}

.arrow_box:after {
border-color: rgba(136, 183, 213, 0);
border-top-color: #88b7d5;
border-width: 15px;
margin-left: -15px;
}
.arrow_box:before {
border-color: rgba(194, 225, 245, 0);
border-top-color: #c2e1f5;
border-width: 21px;
margin-left: -21px;
}

使用http://cssarrowplease.com/生成

（在 google 上简单搜索一下，你就会发现..）

【讨论】：

【解决方案3】：

使用 CssArrow Please 如前所述：

<div class="header">
    <div class="nav">
        <ul>
            <li>Page</li>
            <li id="checked">
                Page 1
                <div class="arrow_box"></div>
            </li>
            <li>Page</li>
            <li>Page</li>
        </ul>
    </div>
    <div class="sub_nav"></div>
</div>

css:

.header{
    width: 50%;
    background-color: #fbfbfb;
}
.nav ul{
    margin: 0px;
    padding: 0px;
    list-style-type: none;
}
#checked{
    padding: 10px;
    background-color: #3178ed;
    display: inline-block;
    color: #fff;
    position: relative; 
}
.nav li{
    padding: 10px;
    display: inline-block;
}
.sub_nav{
    width: 100%;
    height: 20px;
    background-color: #dddddd;
}
.arrow_box {
    position: absolute;
    right: 0;
    left: 0;
    bottom: 0;
    background: #3178ed;
}
.arrow_box:after, .arrow_box:before {
    top: 100%;
    left: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

.arrow_box:after {
    border-color: rgba(49, 120, 237, 0);
    border-top-color: #3178ed;
    border-width: 10px;
    margin-left: -10px;
}
.arrow_box:before {
    border-color: rgba(0, 0, 0, 0);
    border-top-color: ;
    border-width: 11px;
    margin-left: -11px;
}

小提琴：Link

【讨论】：