下拉菜單與-90deg menubar

Question

我有一個-90deg菜單欄，可點擊的按鈕也是-90deg ..我想知道是否有反正我可以添加一個下拉菜單到我的按鈕之一，test5/nth-child （5）是我想添加一個下拉菜單的人，如果可能的話，我將不勝感激，如果它可能做-90deg的下拉菜單，這將是偉大的，如果不是我可以處理橫向，這也將工作很好再次感謝

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"> 
    <a href="#testing1"><span>testing</span></a> 
    <a href="#testing2"><span>testing</span></a> 
    <a href="#testing3"><span>testing</span></a> 
    <a href="#testing4"><span>testing</span></a> 
    <a href="#testing5"><span>Drop MENU</span></a> 
    <a href="#testing6"><span>testing</span></a> 
</div> 

Answer 1

確定...不完美，但我認爲我已經足夠了，所以你可以調整以適應你的要求。

首先是使用包裝來保存菜單..在這種情況下，我使用了nav。這可以讓我們做的是正常建立菜單，但將包裝nav轉換爲定位整個事情，因爲我們想要的。

所以。

這是我們的結構：

<nav> 
    <ul id="right_menu"> 
    <li><a href="#">Item 1</a> 
    </li> 
    <li><a href="#">Item 2</a> 
    </li> 
    <li><a href="#">Item 3</a> 
    </li> 
    <li><a href="#">Item 4</a> 
     <ul class="sub_menu"> 
     <li><a href="">Sub-item 1</a> 
     </li> 
     <li><a href="">Sub-item 2</a> 
     </li> 
     <li><a href="">Sub-item 3</a> 
     </li> 
     </ul> 
    </li> 
    <li><a href="#">Item 5</a> 
    </li> 
    </ul> 
</nav> 

然後，我們定位nav以便它固定在頂部/右但我們再旋轉90度（實際上是-90度）。要調整資產淨值旋轉，我們使用transform-origin點和一個小translateX等於的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); 
} 

這樣的高度，現在我們已經在正確的地方的資產淨值，但菜單本身將有錯誤的順序。

我們通過將列表項目向右移動來解決這個問題，現在它們是反向的，第一個現在位於旋轉菜單的頂部。

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

OK ...第一級完成。

第二個層次是另一個ul但我們定位它絕對

.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

注：我自己受限於定位......我不知道一切是有但我認爲基礎知識就在那裏。