title: How to make this in html and css?
body: <p>I am trying to make this from a design someone gave me:</p>
  
  <p><a href="https://i.stack.imgur.com/G4jFA.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/G4jFA.jpg" alt=""></a>
  </p>
  
  <p>Now, I do have this:</p>
  
  <p><a href="https://i.stack.imgur.com/8GSRK.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8GSRK.png" alt=""></a></p>
  
  <p>But how am I able to add those lines on full height between the options?</p>
  
  <pre><code>&lt;ul id="navigation"&gt;
      &lt;li&gt;&lt;a href="#"&gt;Log In&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;VIP Membership&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Best Players&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Administrators&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Forums&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  
  #navigation { 
      float: right;
      padding-top: 8px;
      font-size: 18px;
      font-family: Arial;
  }
  
  #navigation li { 
      padding: 2px;
      margin: 0;
      float: left;
      list-style: none;
  }
  </code></pre>