CSS - Navbar with pointer on hover - css

Question

I want to make a navigation bar that has an arrow pointing down on hover.
Similar to this:
Is there any way to do this in CSS without using the arrow as a background image and putting padding on the element?

Answer 1

You can use the :after pseudo-element to create a CSS triangle and the position it absolutely.
Something like this:
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

Answer 2

Use a <div class="arrow_box">INFORMACION</div>
With the 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;
}
Generated with http://cssarrowplease.com/
(a simple search on google and you would have found that..)

Answer 3

Using CssArrowPlease as posted before me:
<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;
}
Fiddle: Link