下拉菜单与-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

注：我自己受限于定位......我不知道一切是有但我认为基础知识就在那里。