title: How do you get a triangle hover effect on a pure css navbar?
body: <p>I would like to have a little triangle underneath the the text that points up when the user hovers over the different tabs.  Here is a bit of code I'm working with.</p>
  
  <p><a href="http://jsfiddle.net/88Uxw/" rel="nofollow noreferrer">css navbar</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>* {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  
  body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    margin: 10px;
  }
  
  .tab {
    width: 100%;
    padding: 5px;
    background: #fff;
    color: #000;
    cursor: pointer;
    font-weight: bold;
    border-bottom: 1px solid black;
    position: relative;
  }
  
  .tab:hover {
    background: #a0a0a0;
  }
  
  .tab:hover span {
    display: block;
  }
  
  .tab_child {
    padding: 15px;
    background: #fff;
  }
  
  .selected {
    background: #a0a0a0;
  }
  
  .contain * {
    float: left;
    width: 100px;
  }
  
  span.triangle {
    background-image: url("http://www.inner.org/torah_and_science/mathematics/images/triangle.gif");
    background-repeat: none;
    display: none;
    height: 14px;
    width: 16px;
    position: absolute;
    top: 25px;
    left: 25%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="contain"&gt;
    &lt;div id="one" class="tab selected"&gt;Link1&lt;/div&gt;
    &lt;div id="two" class="tab"&gt;Link2&lt;/div&gt;
    &lt;div id="three" class="tab"&gt;Link3&lt;/div&gt;
    &lt;div id="four" class="tab"&gt;Link4&lt;/div&gt;
    &lt;div id="five" class="tab"&gt;Link5&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>