Menú desplegable con barra de menú -90deg

Tengo una barra de menú de -90 grados, los botones en los que se puede hacer clic también son -90 grados. Me pregunto si de alguna manera puedo agregar un menú desplegable a uno de mis botones, test5 / nth-child (5) es el que me gustaría. para agregar un menú desplegable a, si es posible, lo apreciaría, si es posible hacer el desplegable a -90deg que sería genial, si no puedo lidiar con la horizontal que también funcionará bien, Gracias de nuevo

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 –

  

OK … no es perfecto, pero creo que lo tengo bastante abajo para que puedas modificarlo según tus necesidades.

Lo primero es usar un envoltorio para mantener el menú … en este caso, he usado un nav . Lo que esto nos permite hacer es comstackr el menú como de costumbre, pero transformar el nav envoltura para posicionarlo todo como queramos.

Asi que.

Esta es nuestra estructura:

  

Luego colocamos la nav modo que quede fija en la parte superior / derecha, pero luego la giramos 90 grados (en realidad -90 grados). Para ajustar el punto en el que gira el navegador, utilizamos transform-origin y un pequeño X translateX igual a la altura del 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); } 

Entonces, ahora tenemos la navegación en el lugar correcto, pero el menú en sí tendría el orden incorrecto.

Resolvemos eso flotando los elementos de la lista a la derecha, por lo que ahora están al revés y el primero está ahora en la parte superior del menú girado.

 #right_menu > li { float: right; text-transform:uppercase; position: relative; color:white; list-style:none; } 

OK … primer nivel hecho.

El segundo nivel es otro ul pero lo posicionamos absolutamente.

 .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 */ } 

Resultado final Codepen

Nota: me he restringido al posicionamiento … No estoy seguro de que haya nada más todavía, pero creo que lo básico está ahí.