如何隐藏这个css下拉嵌套列表中的第三个嵌套列表？

Question

我成功创建了这个并不那么糟糕的CSS仅下拉。我试图隐藏.submenutwo，因此只有当.submenu处于悬停状态时才可见。如果我们可以用CSS来做到这一点，那只会是好事。但如果JavaScript或jQuery可以帮助它很好。

/* define a fixed width for the entire menu */ 
 

 
.navigation { 
 
    min-width: 300px; 
 
} 
 
/* reset our lists to remove bullet points and padding */ 
 

 
.mainmenu, 
 
.submenu { 
 
    list-style: none; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
/* make ALL links (main and submenu) have padding and background color */ 
 

 
.mainmenu a { 
 
    display: block; 
 
    background-color: #CCC; 
 
    text-decoration: none; 
 
    padding: 10px; 
 
    color: #000; 
 
} 
 
/* add hover behaviour */ 
 

 
.mainmenu a:hover { 
 
    background-color: #C5C5C5; 
 
} 
 
/* when hovering over a .mainmenu item, 
 
     display the submenu inside it. 
 
     we're changing the submenu's max-height from 0 to 200px; 
 
    */ 
 

 
.mainmenu li:hover .submenu { 
 
    display: block; 
 
    min-height: 200px; 
 
    height: auto; 
 
} 
 
/* 
 
     we now overwrite the background-color for .submenu links only. 
 
     CSS reads down the page, so code at the bottom will overwrite the code at the top. 
 
    */ 
 

 
.submenu a { 
 
    background-color: #999; 
 
} 
 
/* hover behaviour for links inside .submenu */ 
 

 
.submenu a:hover { 
 
    background-color: #666; 
 
} 
 
/* this is the initial state of all submenus. 
 
     we set it to max-height: 0, and hide the overflowed content. 
 
    */ 
 

 
.submenu { 
 
    overflow: hidden; 
 
    max-height: 0; 
 
    -webkit-transition: all 0.5s ease-out; 
 
}

<nav class="navigation"> 
 
    <ul class="mainmenu"> 
 
    <li><a href="">Apples</a> 
 

 

 
     <ul class="submenu"> 
 
     <li><a href="">Green Apples</a> 
 

 
      <ul class="submenutwo"> 
 
      <li class='listOptionLvlThree'><a href="#"> \t Option 3</a> 
 
      </li> 
 
      <li class='listOptionLvlThree'><a href="#"> \t Option 3</a> 
 
      </li> 
 
      <li class='listOptionLvlThree'><a href="#"> \t Option 3</a> 
 
      </li> 
 
      </ul> 
 
     </li> 
 
     </ul> 
 
    </li> 
 
    <li><a href="">Oranges</a> 
 
     <ul class="submenu"> 
 
     <li><a href="">Option 2</a> 
 
     </li> 
 
     <li><a href="">Option 2</a> 
 
     </li> 
 
     <li><a href="">Option 2</a> 
 
     </li> 
 
     </ul> 
 
    </li> 
 
    <li><a href="">Grapes</a> 
 
     <ul class="submenu"> 
 
     <li><a href="">Purple Grapes</a> 
 

 
      <ul class="submenutwo"> 
 
      <li class='listOptionLvlThree'><a href="#"> \t Option 3</a> 
 
      </li> 
 
      <li class='listOptionLvlThree'><a href="#"> \t Option 3</a> 
 
      </li> 
 
      <li class='listOptionLvlThree'><a href="#"> \t Option 3</a> 
 
      </li> 
 
      </ul> 
 
     </li> 
 
     <li><a href="">Green Grapes</a> 
 
     </li> 
 
     <li><a href="">Red Grapes</a> 
 
     </li> 
 
     </ul> 
 
    </li> 
 
    </ul> 
 
</nav>

Answer 1

.submenutwo { 
    display: none } 

.submenu:hover .submenutwo { 
    display: initial } 

这里是你如何能在CSS做到这一点。基本上，这里发生的事情是。起初，你只需要隐藏.submenutwo。在悬停触发后，您只需要将显示恢复为默认值即使其他显示值也可以。

Answer 2

可能，这将帮助ü

/* define a fixed width for the entire menu */ 
 
.navigation { 
 
    min-width: 300px; 
 
} 
 
.submenutwo { 
 
    display: none } 
 

 
.submenu:hover .submenutwo { 
 
    display: initial } 
 
/* reset our lists to remove bullet points and padding */ 
 
.mainmenu, .submenu { 
 
    list-style: none; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
/* make ALL links (main and submenu) have padding and background color */ 
 
.mainmenu a { 
 
    display: block; 
 
    background-color: #CCC; 
 
    text-decoration: none; 
 
    padding: 10px; 
 
    color: #000; 
 
} 
 

 
/* add hover behaviour */ 
 
.mainmenu a:hover { 
 
    background-color: #C5C5C5; 
 
} 
 

 

 
/* when hovering over a .mainmenu item, 
 
    display the submenu inside it. 
 
    we're changing the submenu's max-height from 0 to 200px; 
 
*/ 
 

 
.mainmenu li:hover .submenu { 
 
    display: block; 
 
    min-height: 200px; 
 
    height:auto; 
 
} 
 

 
/* 
 
    we now overwrite the background-color for .submenu links only. 
 
    CSS reads down the page, so code at the bottom will overwrite the code at the top. 
 
*/ 
 

 
.submenu a { 
 
    background-color: #999; 
 
} 
 

 
/* hover behaviour for links inside .submenu */ 
 
.submenu a:hover { 
 
    background-color: #666; 
 
} 
 

 
/* this is the initial state of all submenus. 
 
    we set it to max-height: 0, and hide the overflowed content. 
 
*/ 
 
.submenu { 
 
    
 
    overflow: hidden; 
 
    max-height: 0; 
 
    -webkit-transition: all 0.5s ease-out; 
 
}

<nav class="navigation"> 
 
    <ul class="mainmenu"> 
 
    <li><a href="">Apples</a> 
 

 

 
    <ul class="submenu"> 
 
     <li><a href="">Green Apples</a> 
 

 
     <ul class="submenutwo"> 
 
      <li class='listOptionLvlThree'><a href="#"> Option 3</a></li> 
 
      <li class='listOptionLvlThree'><a href="#"> Option 3</a></li> 
 
      <li class='listOptionLvlThree'><a href="#"> Option 3</a></li> 
 
      </ul> 
 
     </li> 
 
     </ul> 
 
    </li> 
 
    <li><a href="">Oranges</a> 
 
     <ul class="submenu"> 
 
     <li><a href="">Option 2</a></li> 
 
     <li><a href="">Option 2</a></li> 
 
     <li><a href="">Option 2</a></li> 
 
     </ul> 
 
    </li> 
 
    <li><a href="">Grapes</a> 
 
     <ul class="submenu"> 
 
      <li><a href="">Purple Grapes</a> 
 

 
      <ul class="submenutwo"> 
 
      <li class='listOptionLvlThree'><a href="#"> Option 3</a></li> 
 
      <li class='listOptionLvlThree'><a href="#"> Option 3</a></li> 
 
      <li class='listOptionLvlThree'><a href="#"> Option 3</a></li> 
 
      </ul> 
 
     </li> 
 
     <li><a href="">Green Grapes</a></li> 
 
     <li><a href="">Red Grapes</a></li> 
 
     </ul> 
 
    </li> 
 
    </ul> 
 
</nav>