title: How do i add vertical line on my menu item in html/css
body: <p>I am trying to have a menu navigation like this:</p>
  
  <blockquote>
    <p>start fire | our fires | past fires</p>
  </blockquote>
  
  <p>I want the menu items to be separated by vertical lines as opposed to spaces</p>
  
  <pre><code>&lt;ul class="standard-nav visible-lg"&gt;
      &lt;li&gt;&lt;a id="intro-linker" class="scroll" href="#intro"&gt;Start a fire&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a id="about-linker" class="scroll" href="#ourfires"&gt;Our fire&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a id="services-linker" class="scroll" href="#pastfires"&gt;Past fires&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a id="team-linker" class="scroll" href="#team"&gt;Chief fire lighter&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a id="portfolio-linker" class="scroll" href="#seriesfires"&gt;Series of fires&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a id="contact-linker" class="scroll" href="#contact"&gt;Get fired up&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>The css is here:</p>
  
  <pre><code>.standard-nav{
      list-style: none;
      padding: 0;
      margin: 0;
      margin-top: 25px;
      float: right;
  }
  .standard-nav li{
      display: inline-block;
      float: left;
      margin-left: 10px;
      margin-right: 10px;
  }    
  .standard-nav li &gt; a{
      color: #ffffff;
      font-family: "Vegur Light";
      font-size: 16px;
      font-weight: 400;
      letter-spacing: 0.15em;
      line-height:19px;
      /*text-transform: uppercase;*/
  }
  </code></pre>