Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Show border triangle in navbar using CSS

I am trying to create a nav bar with an arrow under the item hovered upon. Here's is what I am trying to make:

enter image description here

For the arrow I have used the pseudo elements before and after. Here is some of the code:

body {
  background: #FFFFFF;
  color: #FFFFFF;
  margin: 0px;
  padding: 0px;
  height: 100%;
}
.clear {
  clear: both;
}
.page-wrap {
  width: 980px;
  margin: 0px auto;
  height: 100%;
}
#main-menu {
  background: white;
  height: 55px;
  width: 100%;
  padding: 0px;
  margin: 0px;
  border-bottom: 1px solid black;
}
ul {
  font-family: Arial, Verdana;
  font-size: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}
ul li {
  display: block;
  position: relative;
  float: left;
}
li ul {
  display: none;
}
ul li a {
  display: block;
  text-decoration: none;
  color: black;
  padding: 0 9px 0 9px;
  background: white;
  margin-left: 1px;
  white-space: nowrap;
  line-height: 55px;
  font: 18px;
  font-family: Arial, Helvetica, sans-serif;
  outline: none;
}
ul li a:hover {
  color: black;
}
#menu a:hover:after {
  content: "";
  position: absolute;
  top: 40px;
  left: 50%;
  margin-left: -15px;
  width: 0px;
  height 0px;
  xxmargin: 0px auto;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-bottom: 15px solid black;
}
<header id="main-menu">
  <div class="page-wrap">
    <ul id="menu">
      <li><a href="#">Recommended</a></li>
      <li><a href="#">Recent</a></li>
    </ul>
  </div>
</header>

Fiddle Link

The arrows are black in color, because of the border color. How to show just the borders of the arrow?

like image 369
Ateev Chopra Avatar asked Jun 03 '15 07:06

Ateev Chopra


1 Answers

Just add before pseudo element like what you add :after

#menu a:hover:after {
  content: "";
  position: absolute;
  top: 41px;
  left: 50%;
  margin-left: -15px;
  width: 0px;
  height 0px;
  margin: 0px auto;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-bottom: 15px solid white;
}
#menu a:hover:before {
  content: "";
  position: absolute;
  top: 40px;
  left: 50%;
  margin-left: -15px;
  width: 0px;
  height 0px;
  margin: 0px auto;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-bottom: 15px solid black;
}

and i have updated you pen please check

http://codepen.io/anon/pen/vOxmGZ

like image 70
Karthi Keyan Avatar answered Nov 05 '22 21:11

Karthi Keyan