Skip to content

Instantly share code, notes, and snippets.

@DyegoCosta

DyegoCosta/gist:3624734

Created September 4, 2012 18:37
Show Gist options
  • Save DyegoCosta/3624734 to your computer and use it in GitHub Desktop.
Save DyegoCosta/3624734 to your computer and use it in GitHub Desktop.
Download ZIP
Adding an arrow to a li element with css
Raw
gistfile1.txt
<html>
<header>
<style>
ul.menu {
display: block;
margin: 0 80px;
font-family: 'Segoe UI', Tahoma, Arial, Helvetica, Sans-Serif;
font-size: 15px;
text-align: center;
letter-spacing: -1px;
}
ul.menu > li {
height: 35px;
display: inline-block;
list-style-type: none;
border: 1px solid #C9CACB;
margin: -1px -2px;
position: relative;
}
ul.menu > li > a {
display: inline-block;
text-decoration: none;
color: #333333;
padding: 8px 15px;
float: none;
}
ul.menu > li.ativo {
background-color: #E5E5E5;
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.125) inset;
color: #555555;
text-decoration: none;
}
ul.menu > li.ativo:before {
content: '';
display: block;
position: absolute;
top: 100%;
left: 38.8%;
width: 0;
height: 0;
border-color: #C9CACB transparent transparent transparent;
border-style: solid;
border-width: 9px;
}
ul.menu > li.ativo:after {
content: '';
display: block;
position: absolute;
top: 100%;
left: 40%;
width: 0;
height: 0;
border-color: #E5E5E5 transparent transparent transparent;
border-style: solid;
border-width: 8px;
}
</style>
</header>
<body>
<nav>
<ul class="menu">
<li><a href="#">Item 1</a></li>
<li class="ativo"><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
<li><a>Item 4</a></li>
<ul>
</nav>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment