HTML/CSS功能区列表

Question

我在我的网站（首页，关于，故事）的主页上创建了一个功能区，仅使用HTML和CSS的水平线。 “故事”按钮显示两个项目的下拉菜单。我的问题是这样的：我怎样才能使用类似的方法，以便在从主功能区下拉的某个选项旁边出现放置“右键”菜单？我已经包含了下面的图片和代码。我意识到这可能是非常复杂的;我是初学者。

代码（HTML）：

<div id="animatedRibbon"> 
    <nav> 
     <ul> 
      <li class="sub-menu-parent"><a href="#">Home</a></li> 
      <li class="sub-menu-parent"><a href="#">Story</a> 
       <ul class="sub-menu"> 
        <li><a href="#" class="sub-sub-menu-parent2015">2015</a> 
         <ul class="sub-sub-menu2015"> 
          <li class="option2015"><a href="#">March</a></li> 
          <li class="option2015"><a href="#">April</a></li> 
          <li class="option2015"><a href="#">May</a></li> 
          <li class="option2015"><a href="#">June</a></li> 
          <li class="option2015"><a href="#">July</a></li> 
          <li class="option2015"><a href="#">August</a></li> 
          <li class="option2015"><a href="#">September</a>    </li> 
          <li class="option2015"><a href="#">October</a></li> 
          <li class="option2015"><a href="#">November</a></li> 
          <li class="option2015"><a href="#">December</a></li> 
         </ul> 
        </li> 
        <li><a href="#" class="sub-sub-menu-parent-2016">2016</a> 
         <ul class="sub-sub-menu2016"> 
          <li class="option2016"><a href="#">January</a></li> 
          <li class="option2016"><a href="#">February</a></li> 
          <li class="option2016"><a href="#">March</a></li> 
          <li class="option2016"><a href="#">April</a></li> 
          <li class="option2016"><a href="#">May</a></li> 
          <li class="option2016"><a href="#">June</a></li> 
          <li class="option2016"><a href="#">July</a></li> 
          <li class="option2016"><a href="#">August</a></li> 
          <li class="option2016"><a href="#">September</a></li> 
          <li class="option2016"><a href="#">October</a></li> 
          <li class="option2016"><a href="#">November</a></li> 
          <li class="option2016"><a href="#">December</a></li> 
         </ul> 
        </li> 
       </ul> 
      </li> 
      <li class="sub-menu-parent"><a href="about.html">About</a></li> 
     </ul> 
    </nav> 
</div> 

CSS：

.sub-menu-parent { position: relative; } 

.sub-menu { 
    visibility: hidden; /* hides sub-menu */ 
    opacity: 0; 
    position: absolute; 
    top: 100%; 
    left: 0%; 
    width: 100%; 
    transform: translateY(-1em); 
    z-index: 0; 
    transition: all 0.3s ease-in-out 0s, visibility 0s linear 0.3s, z-index 0s linear 0.01s;} 

.sub-menu-parent:hover .sub-menu { 
    visibility: visible; /* shows sub-menu */ 
    opacity: 0.85; 
    z-index: 1; 
    transform: translateY(0%); 
    transition-delay: 0s, 0s, 0.3s; /* this removes the transition delay so the menu will be visible while the other styles transition */} 


.sub-sub-menu2015 { 
    visibility: hidden; 
    opacity: 1; 
    position: absolute; 
    top: 0%; 
    left: 50%; 
    width: 100%; 
    transform: translateX(2em); 
    z-index: 1; 
    transition: all 0.3s ease-in-out 0s, visibility 0s linear 0.3s, z-index 0s linear 0.51s;} 

.sub-sub-menu2016 { 
    visibility: hidden; 
    opacity: 1; 
    position: absolute; 
    top: 100%; 
    left: 50%; 
    width: 100%; 
    transform: translateX(2em); 
    z-index: 1; 
    transition: all 0.3s ease-in-out 0s, visibility 0s linear 0.3s, z-index 0s linear 0.01s;} 

.sub-sub-menu-parent2015:hover .sub-sub-menu2015 { 
    visibility: visible; 
    opacity: 0.85; 
    z-index: 2; 
    transform: translateY(0%); 
    transition-delay: 0s, 0s, 0.3s;} 

/* presentational */ 
/*body { padding: 2%; font: 18px/1.4 sans-serif; }*/ 

nav a { color: #E00; display: block; padding: 0.5em 1em; text-decoration: none;} 
nav a:hover { color: #F55; } 
nav ul, 
nav ul li { list-style-type: none; padding: 0; margin: 0; } 

nav > ul { background: #ffdead; text-align: center; } 
nav > ul > li { display: inline-block; border-left: solid 1px #aaa; } 
nav > ul > li:first-child { border-left: none; } 

.sub-menu { 
    background: #ffdead;} 

nav > ul > li > a:link { 
    font-size: 36px;} 

nav > ul > li > a:hover, 
nav > ul > li > ul > li > a:hover { 
    color: #000; 
    text-shadow: 0 0 10px #fff, 
     0 0 20px #fff, 
     0 0 30px #fff, 
     0 0 40px #74AFAD, 
     0 0 70px #74AFAD, 
     0 0 80px #74AFAD, 
     0 0 100px #74AFAD, 
     0 0 150px #74AFAD;} 

nav > ul > li > ul > li > a:link { 
    font-size: 18px;} 

#animatedRibbon { 
    width: 900px; 
    margin: 0 auto;} 

下面是一些图像细节正是我想说的。 Main menu ribbon with drop down menu Desired effect (1)

Answer 1

在CSS的微小变化会给你你想为你的sub-sub-menus预期的效果。

这里的CSS：

ul[class*="sub-sub-menu"] { 
    background: #ffdead; 
    left: 100%; 
    top: 0%; 
    transition-delay: 0s, 0s, 0.3s; 
} 

.sub-menu-parent .sub-menu li { 
    position: relative; 
} 

.sub-menu-parent .sub-menu li:hover .sub-sub-menu2015, 
.sub-menu-parent .sub-menu li:hover .sub-sub-menu2016 { 
    visibility: visible; 
    opacity: 0.85; 
    z-index: 1; 
    transform: translateY(0%); 
} 

在这里，我还创建了一个JSFiddle