title: vertical navigation with rotated text
body: <p>I am trying to achieve a vertical navigation menu which has links and I have rotated the links text to 270 degree with css3. I have rotated it because I wanted the text to be bottom to top. The problem is when I add a padding top it is getting inconsistent spacing. you can see my code <a href="http://jsbin.com/ravuduni/1/edit" rel="noreferrer">here</a>. I am unable to understand the different space being taken. I also tried giving li a height but it did not work. Please if someone could help me out. Here is my code:</p>
  
  <p><strong>HTML</strong>:</p>
  
  <pre><code>&lt;div class="main-nav"&gt;
        &lt;ul class="nav"&gt;
          &lt;li&gt;&lt;a href="#"&gt;HOME&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;METHODOLGY&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;PORTFOLIO&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;SERVICES&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;TEAM&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;CONTACT&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong>:</p>
  
  <pre><code>.rotate{
      -webkit-transform:rotate(270deg);-moz-transform:rotate(270deg);-o-transform:rotate(270deg);writing-mode:lr-tb}
  html, body {
    min-height:100%;
    max-height:100%;
    height:100%;
    font-family:Oswald, sans-serif, Arial;
    font-size:14px;
    background:#fff
  }
  a {
    text-decoration:none
  }
  li {
    list-style:none
  }
  ul {
    padding:0;
    margin:0
  }
  .main-nav {
    width:45px;
    float:left;
    height:100%;
    position:fixed;
    background:#4c4c4c
  }
  ul.nav {
    width:21px;
    margin:0 auto
  }
  ul.nav li:first-child {
    padding-top:35px
  }
  ul.nav li {
    padding-top:124px
  }
  ul.nav li a {
    -webkit-transform:rotate(270deg);
    -moz-transform:rotate(270deg);
    -o-transform:rotate(270deg);
    writing-mode:lr-tb;
    float:left;
    width:21px;
    color:#fff
  }
  </code></pre>