Расстояние между кнопками Navbar находится друг под другом, а не бок о бок

У меня возникли проблемы с расстоянием между кнопками Navbar. Я понятия не имею, почему буквы расположены друг под другом, а не рядом, я попробовал использовать встроенный блок; но это, похоже, не сработало, поэтому я уверен, что здесь что-то происходит в коде, который отключает его. sub_menu прекрасно работает с использованием inline-block,

Jsfiddle

Css

#right_menu {

  position:fixed;

  font-size:15px;

  top:-80px;

  right:-115px;

  padding:70px;

  background-color:#FF00FF;

  width:-40%;

  height:110%;

  text-transform:uppercase;

}



#right_menu > li {

  text-align:center;

  display:block;

  padding:20px;

  height:16%;

  top:-10px;

  width:0;

  margin-bottom:0;

  text-transform:uppercase;

  position:relative;

  -webkit-transform:rotate(-90deg);

  -moz-transform:rotate(-90deg);

  -ms-transform:rotate(-90deg);

}



#right_menu li a {

  text-align:center;

  display:block;

  padding:20px;

  position:fixed;

  text-transform:uppercase;

  text-decoration:none;

}



#right_menu > li:hover > a {

  background:#FF00FF;

  top:-1px;

}

Html

<ul id="right_menu"><li><a href="#">Home</a></li>

        <li><a href="#">About Me</a></li>

        <li><a href="#">Testing Two</a></li>

        <li><a href="#">Testing Three</a>

          <ul class="sub_menu"><li><a href="#">Sub Test</a>

          <ul class="sub_menu2"><li><a href="#">Sub Test Two</a>

        </li>

</ul></li>

          </ul></li>

        <li><a href="#">Message Me</a></li>

</ul>