JSFiddle - React, Tailwind, and code Playground

by afelixj

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>

CSS

html,body {
  height:100%;
}

article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
  display:block;
}

b,strong {
  font-weight:bold;
}

img {
  color:transparent;
  font-size:0;
  vertical-align:middle;
  -ms-interpolation-mode:bicubic;
}

ol,ul {
  list-style:none;
}

li {
  display:list-item;
}

table {
  border-collapse:collapse;
  border-spacing:0;
}

th,td,caption {
  font-weight:normal;
  vertical-align:top;
  text-align:left;
}

q {
  quotes:none;
}

q:before,q:after {
  content:'';
  content:none;
}

sub,sup,small {
  font-size:75%;
}

sub,sup {
  line-height:0;
  position:relative;
  vertical-align:baseline;
}

sub {
  bottom:-.25em;
}

sup {
  top:-.5em;
}

svg {
  overflow:hidden;
}

body {
  font-family:Verdana,Geneva,sans-serif;
  color:#FFF;
  font-size:12px;
  font-family:Trebuchet MS,Arial,Helvetica;
  background:url() no-repeat center 0,#000 url() left top;
  background-size:1670px 950px;
}

#header_bar,#profile_header,#profile_main_photo,#footer_bar {
  display:none;
  list-style-type:none;
}

#right_menu {
  position:fixed;
  font-size:15px;
  top:-80px;
  right:-55px;
  padding:50px;
  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;
    white-space: nowrap;
}

#right_menu > li:hover > a {
  background:#FF00FF;
  top:-1px;
}

#right_menu li:hover .sub_menu {
  display:block;
}

.sub_menu {
  display:none;
  position:relative;
  top:-95%;
  left:20%;
  transform:translateX(-50%);
  width:auto;
  white-space:nowrap;
}

.sub_menu > li {
 ...