Dropdown Menu with -90deg menubar - html

Question

I have a -90deg menu bar, the clickable buttons are also -90deg.. I am wondering if there is anyway I can add a dropdown menu to one of my buttons , test5/nth-child(5) is the one I would like to add a dropdown menu to, if possible I would appreciate it, if its possible to do the dropdown at -90deg that would be great, if not i can deal with horizontal that will also work great , Thanks Again
https://jsfiddle.net/nyjhfr8g/2/
CSS -
body {
font-family:Verdana,Geneva,sans-serif;
color:#FFF;
font-size:12px;
font-family:Trebuchet MS,Arial,Helvetica;
text-align:center;
background:url() no-repeat center 0,#000 url() left top;
background-size:1670px 950px;
}
p {
margin-bottom:10px;
line-height:21px;
}
a {
color:#F09;
text-decoration:none;
}
a:hover {
text-decoration:underline;
}
#right_menu {
position:fixed;
font-size:15px;
top:0;
right:0;
background-color:#FF00FF;
width:50px;
height:100%;
}
#right_menu a {
text-align:center;
display:block;
padding:10px;
height:15%;
width:50px;
margin-bottom:0;
text-transform:uppercase;
position:relative;
}
#right_menu a:nth-child(1) {
background-color:#FF00FF;
color:#FFF;
}
#right_menu a:nth-child(1) span {
display:block;
position:absolute;
top:40px;
left:-40px;
width:130px;
color:#FFF;
-webkit-transform:rotate(-90deg);
-moz-transform:rotate(-90deg);
-ms-transform:rotate(-90deg);
transition:left .3s ease;
}
#right_menu a:nth-child(1):hover span {
left:-45px;
}
#right_menu a:nth-child(2) {
background-color:#FF00FF;
color:#FFF;
}
#right_menu a:nth-child(2) span {
display:block;
position:absolute;
top:20px;
left:-40px;
width:130px;
color:#FFF;
-webkit-transform:rotate(-90deg);
-moz-transform:rotate(-90deg);
-ms-transform:rotate(-90deg);
transition:left .3s ease;
}
#right_menu a:nth-child(2):hover span {
left:-45px;
}
#right_menu a:nth-child(3) {
background-color:#FF00FF;
color:#FFF;
}
#right_menu a:nth-child(3) span {
display:block;
position:absolute;
top:20px;
left:-40px;
width:130px;
color:#FFF;
-webkit-transform:rotate(-90deg);
-moz-transform:rotate(-90deg);
-ms-transform:rotate(-90deg);
transition:left .3s ease;
}
#right_menu a:nth-child(3):hover span {
left:-45px;
}
#right_menu a:nth-child(4) {
background-color:#FF00FF;
color:#FFF;
}
#right_menu a:nth-child(4) span {
display:block;
position:absolute;
top:20px;
left:-40px;
width:130px;
color:#FFF;
-webkit-transform:rotate(-90deg);
-moz-transform:rotate(-90deg);
-ms-transform:rotate(-90deg);
transition:left .3s ease;
}
#right_menu a:nth-child(4):hover span {
left:-45px;
}
#right_menu a:nth-child(5) {
background-color:#FF00FF;
color:#FFF;
}
#right_menu a:nth-child(5) span {
display:block;
position:absolute;
top:20px;
left:-40px;
width:130px;
color:#FFF;
-webkit-transform:rotate(-90deg);
-moz-transform:rotate(-90deg);
-ms-transform:rotate(-90deg);
transition:left .3s ease;
}
#right_menu a:nth-child(5):hover span {
left:-45px;
}
#right_menu a:nth-child(6) {
background-color:#FF00FF;
color:#FFF;
}
#right_menu a:nth-child(6) span {
display:block;
position:absolute;
top:20px;
left:-40px;
width:130px;
color:#FFF;
-webkit-transform:rotate(-90deg);
-moz-transform:rotate(-90deg);
-ms-transform:rotate(-90deg);
transition:left .3s ease;
}
#right_menu a:nth-child(6):hover span {
left:-45px;
}
HTML -
<div id="right_menu">
<span>testing</span>
<span>testing</span>
<span>testing</span>
<span>testing</span>
<span>Drop MENU</span>
<span>testing</span>
</div>

Answer 1

OK...not perfect but I think I have it down enough so you can tweak to suit your requirements.
The first thing is to use a wrapper to hold the menu..in this case, I've used a nav. What this allows us to do is build the menu as normal but transform the wrapper nav to position the whole thing as we want.
So.
This is our structure :
<nav>
<ul id="right_menu">
<li>Item 1
</li>
<li>Item 2
</li>
<li>Item 3
</li>
<li>Item 4
<ul class="sub_menu">
<li>Sub-item 1
</li>
<li>Sub-item 2
</li>
<li>Sub-item 3
</li>
</ul>
</li>
<li>Item 5
</li>
</ul>
</nav>
Then we position the nav so that it's fixed to the top / right but we then rotate it 90 degrees (actually -90 degrees). To adjust the point at which the nav rotates we use transform-origin and a small translateX equal to the height of the nav
nav {
height: 50px;
line-height: 50px;
background: #FF00FF;
position: fixed;
top:50;
right:0;
width: 100vh; /* I'm always the height (after rotation) of the viewport */
transform-origin:top right;
transform:translateX(-50px) rotate(-90deg);
}
So, now we have the nav in the right place but the menu itself would have the wrong order.
We solve that by floating the list-items to the right and so they are now reverse and the first one is now at the top of the rotated menu.
#right_menu > li {
float: right;
text-transform:uppercase;
position: relative;
color:white;
list-style:none;
}
OK...first level done.
Second level is another ul but we position it absolutely
.sub_menu {
display: none;
position: absolute;
top:-100%; /* now to the "left" of the parent */
left:50%;
transform:translateX(-50%); /* center it over the parent */
width: auto;
white-space: nowrap; /* allows the sub menu to be wider than parent */
}
Final Result Codepen
Note: I've restricted myself to the positioning...I'm not sure everything else is there yet but I think the basics are there.