title: Rotating Navigation Hyperlinks in a ul
body: <p>I am building a Wordpress theme (based on the bones theme) where the design requires the menu (a ul) to be rotated 90 degrees clockwise, so the menu runs (fixed) along the right of the screen, with the words in the links rotated likewise. I have rotated the ul, but it hides half the menu on top of the window and sits considerably off the right side of the screen. Is this because of the rotation or an overriding piece of css in the bones theme?</p>
  
  <p><strong>EDIT</strong></p>
  
  <p>I have changed the code so that the menu now renders correctly in Chrome, but FF and Safari render the menu about 10px too far right (I'm going to do IE later,oh the joys!). Any ideas how this can be corrected?</p>
  
  <p>Here is a jsFiddle of the relevant edited code: <a href="http://jsfiddle.net/phily245/bWjN2/" rel="nofollow">http://jsfiddle.net/phily245/bWjN2/</a></p>
  
  <p>Alternatively, here is the edited HTML:</p>
  
  <pre><code>&lt;link href='http://fonts.googleapis.com/css?family=Nunito' rel='stylesheet' type='text/css'&gt;
  
  &lt;nav role="navigation"&gt;
  &lt;ul id="menu-index-page-main-menu" class="nav top-nav clearfix"&gt;
      &lt;li id="menu-item-12" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-12"&gt;&lt;a href="#toTheTip"&gt;To The Tip&lt;/a&gt;&lt;/li&gt;
      &lt;li id="menu-item-13" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-13"&gt;&lt;a href="#about"&gt;About&lt;/a&gt;&lt;/li&gt;
      &lt;li id="menu-item-14" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-14"&gt;&lt;a href="#ourAssets"&gt;Our Assests&lt;/a&gt;&lt;/li&gt;
      &lt;li id="menu-item-15" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-15"&gt;&lt;a href="#contact"&gt;Contact&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>​</p>
  
  <p>And here is the edited CSS:</p>
  
  <pre><code>body{ /*This is to emulate the bg*/
  background-color: #85dbf8;
  min-height: 3000px;
  }
  
  .nav{
      position: fixed;
      display: block;
      top: 0;
      right: 0;          
      z-index:999;
      background: transparent;
      border:0;
      -webkit-transform: rotate(90deg);
      -moz-transform: rotate(90deg);
      -o-transform: rotate(90deg);
      writing-mode: tb-rl;
  }
  
  .nav li{
      position:relative;
      display: block;
      float: left;
      width: auto;
      margin: 0 9px;
      border-radius: 0px 0px 5px 5px;
      color: #ffffff;
      /*box-shadow: 4px 0px 4px #eee;*/
  }
  
  .nav li a{
      border: 0;
      border-radius: 0px 0px 5px 5px;
      color: #85dbf8;
      font-weight: bolder;
      text-transform: uppercase;
  }
  
  .nav li a:hover,.nav li a:focus{
      color:#086a8b;
  }
  .nav{
      /*border:1px solid #ccc;*/
      border-bottom:0;
  }
  
  .nav li a{
      display:block;
      text-decoration:none;
      padding:10px 20px;
      background-color:#ffffff;
      border-bottom:1px solid #ccc;
  }​
  </code></pre>