title: Turning a horizontal breadcrumbs navigation, vertical
body: <p>This might be a but too much to ask, but I am at my limits here.</p>
  
  <p>I have this (<a href="http://jsfiddle.net/3whTa/" rel="nofollow">http://jsfiddle.net/3whTa/</a>) piece of CSS, that creates an arrow horizontal breadcrumbs navigation.</p>
  
  <p>What I want to do is convert it to vertical. As in, the arrows points down on eachother, but text is still horizontal (would have to be resized then).</p>
  
  <p>How is this possible? Also, I have tried searching around for a navigation like this, but I havent found anything, so a point in the right direction would be just as helpful.</p>
  
  <p>You can see it in action, and the code in the linked jsfiddle above, but i will paste it in here as well:</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;ul id="breadcrumbs-two"&gt;
      &lt;li&gt;&lt;a href="#"&gt;one&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;two&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;three&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;four&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>#breadcrumbs-two{
    overflow: hidden;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  
  #breadcrumbs-two li{
    float: left;
    margin: 0 .5em 0 1em;
  }
  
  #breadcrumbs-two a{
    background: #ddd;
    padding: .7em 1em;
    float: left;
    text-decoration: none;
    color: #444;
    text-shadow: 0 1px 0 rgba(255,255,255,.5); 
    position: relative;
  }
  
  #breadcrumbs-two a:hover{
    background: #99db76;
  }
  
  #breadcrumbs-two a::before{
    content: "";
    position: absolute;
    top: 50%; 
    margin-top: -1.5em;   
    border-width: 1.5em 0 1.5em 1em;
    border-style: solid;
    border-color: #ddd #ddd #ddd transparent;
    left: -1em;
  }
  
  #breadcrumbs-two a:hover::before{
    border-color: #99db76 #99db76 #99db76 transparent;
  }
  
  #breadcrumbs-two a::after{
    content: "";
    position: absolute;
    top: 50%; 
    margin-top: -1.5em;   
    border-top: 1.5em solid transparent;
    border-bottom: 1.5em solid transparent;
    border-left: 1em solid #ddd;
    right: -1em;
  }
  
  #breadcrumbs-two a:hover::after{
    border-left-color: #99db76;
  }
  
  #breadcrumbs-two .current,
  #breadcrumbs-two .current:hover{
      font-weight: bold;
      background: #99db76;
  }
  
  #breadcrumbs-two .current::after{
      border-left-color: #99db76;
  }
  #breadcrumbs-two .current::before{
      border-color: #99db76 #99db76 #99db76 transparent;
  }
  </code></pre>