cssでこのネストされたリストを美しくする方法は？

Question

このドロップダウンメニューでは、ネストされたリストを作成しました。しかし、私がheightをどのように調整しても、すべての要素を.submenutwoに表示することはできません。さらに、ホバリング.submenutwoの場合、ユーザーは他のオプションを見ることができなくなります。これはCSSや非常に最小限のjavascriptでこれを修正する簡単な方法はありますか？ height〜min-heightを調整しても機能しません。私はonclickがhoveringより良いと思います。

/* 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; 
 
} 
 
.submenutwo { 
 
    display: none 
 
} 
 
.submenu:hover .submenutwo { 
 
    display: initial; 
 
    min-height: 300px; 
 
    height: auto; 
 
}

<nav class="navigation"> 
 
    <ul class="mainmenu"> 
 

 

 
    <li><a href="">Residential</a> 
 
     <ul class="submenu"> 
 
     <li><a href="">Interior</a> 
 
      <ul class="submenutwo"> 
 
      <li class='listOptionLvlThree'><a href="#">Kitchen \t </a> 
 
      </li> 
 
      <li class='listOptionLvlThree'><a href="#"> \t Bathroom \t </a> 
 
      </li> 
 
      <li class='listOptionLvlThree'><a href="#"> \t Basement \t </a> 
 
      </li> 
 
      <li class='listOptionLvlThree'><a href="#"> \t Bedroom \t </a> 
 
      </li> 
 
      <li class='listOptionLvlThree'><a href="#"> \t Diner Room \t </a> 
 
      </li> 
 
      <li class='listOptionLvlThree'><a href="#"> \t More option \t </a> 
 
      </li> 
 
      <li class='listOptionLvlThree'><a href="#"> \t More option \t </a> 
 
      </li> 
 
      <li class='listOptionLvlThree'><a href="#"> \t More option \t </a> 
 
      </li> 
 
      <li class='listOptionLvlThree'><a href="#"> \t More option \t </a> 
 
      </li> 
 
      <li class='listOptionLvlThree'><a href="#"> \t More option \t </a> 
 
      </li> 
 
      <li class='listOptionLvlThree'><a href="#"> \t More option \t </a> 
 
      </li> 
 
      <li class='listOptionLvlThree'><a href="#"> \t More option \t </a> 
 
      </li> 
 
      <li class='listOptionLvlThree'><a href="#"> \t More option \t </a> 
 
      </li> 
 
      </ul> 
 
     </li> 
 

 

 

 
     <li><a href="">Exterior</a> 
 
      <ul class="submenutwo"> 
 
      <li class='listOptionLvlThree'><a href="#"> \t Doors and windows \t </a> 
 
      </li> 
 
      <li class='listOptionLvlThree'><a href="#"> \t Garage \t </a> 
 
      </li> 
 
      <li class='listOptionLvlThree'><a href="#"> \t Roofing \t </a> 
 
      </li> 
 
      <li class='listOptionLvlThree'><a href="#"> \t Insulation \t </a> 
 
      </li> 
 
      <li class='listOptionLvlThree'><a href="#"> \t Masonry</a> 
 
      </li> 
 
      <li class='listOptionLvlThree'><a href="#"> \t More option \t </a> 
 
      </li> 
 
      <li class='listOptionLvlThree'><a href="#"> \t More option \t </a> 
 
      </li> 
 
      <li class='listOptionLvlThree'><a href="#"> \t More option \t </a> 
 
      </li> 
 
      <li class='listOptionLvlThree'><a href="#"> \t More option \t </a> 
 
      </li> 
 
      <li class='listOptionLvlThree'><a href="#"> \t More option \t </a> 
 
      </li> 
 
      <li class='listOptionLvlThree'><a href="#"> \t More option \t </a> 
 
      </li> 
 
      <li class='listOptionLvlThree'><a href="#"> \t More option \t </a> 
 
      </li> 
 
      <li class='listOptionLvlThree'><a href="#"> \t More option \t </a> 
 
      </li> 
 
      </ul> 
 
     </li> 
 

 

 
     <li><a href="">Services</a> 
 
      <ul class="submenutwo"> 
 
      </ul> 
 
     </li> 
 
     </ul> 
 
    </li> 
 

 

 

 

 

 

 

 

 
    <li><a href="">Commercial</a> 
 
     <ul class="submenu"> 
 
     <li><a href="">Interior</a> 
 
      <ul class="submenutwo"> 
 
      <li class='listOptionLvlThree'><a href="#"> \t More option \t </a> 
 
      </li> 
 
      <li class='listOptionLvlThree'><a href="#"> \t More option \t </a> 
 
      </li> 
 
      <li class='listOptionLvlThree'><a href="#"> \t More option \t </a> 
 
      </li> 
 
      <li class='listOptionLvlThree'><a href="#"> \t More option \t </a> 
 
      </li> 
 
      <li class='listOptionLvlThree'><a href="#"> \t More option \t </a> 
 
      </li> 
 
      <li class='listOptionLvlThree'><a href="#"> \t More option \t </a> 
 
      </li> 
 
      <li class='listOptionLvlThree'><a href="#"> \t More option \t </a> 
 
      </li> 
 
      <li class='listOptionLvlThree'><a href="#"> \t More option \t </a> 
 
      </li> 
 
      </ul> 
 
     </li> 
 

 

 

 
     <li><a href="">Exterior</a> 
 
      <ul class="submenutwo"> 
 
      <li class='listOptionLvlThree'><a href="#"> \t More option \t </a> 
 
      </li> 
 
      <li class='listOptionLvlThree'><a href="#"> \t More option \t </a> 
 
      </li> 
 
      <li class='listOptionLvlThree'><a href="#"> \t More option \t </a> 
 
      </li> 
 
      <li class='listOptionLvlThree'><a href="#"> \t More option \t </a> 
 
      </li> 
 
      <li class='listOptionLvlThree'><a href="#"> \t More option \t </a> 
 
      </li> 
 
      <li class='listOptionLvlThree'><a href="#"> \t More option \t </a> 
 
      </li> 
 
      <li class='listOptionLvlThree'><a href="#"> \t More option \t </a> 
 
      </li> 
 
      <li class='listOptionLvlThree'><a href="#"> \t More option \t </a> 
 
      </li> 
 
      </ul> 
 
     </li> 
 

 

 
     <li><a href="">Services</a> 
 
      <ul class="submenutwo"> 
 
      </ul> 
 
     </li> 
 
     </ul> 
 
    </li> 
 

 

 

 

 
    <li><a href="">Industrial</a> 
 
     <ul class="submenu"> 
 
     <li><a href="">Interior</a> 
 
      <ul class="submenutwo"> 
 
      <li class='listOptionLvlThree'><a href="#"> \t More option \t </a> 
 
      </li> 
 
      <li class='listOptionLvlThree'><a href="#"> \t More option \t </a> 
 
      </li> 
 
      <li class='listOptionLvlThree'><a href="#"> \t More option \t </a> 
 
      </li> 
 
      <li class='listOptionLvlThree'><a href="#"> \t More option \t </a> 
 
      </li> 
 
      <li class='listOptionLvlThree'><a href="#"> \t More option \t </a> 
 
      </li> 
 
      <li class='listOptionLvlThree'><a href="#"> \t More option \t </a> 
 
      </li> 
 
      <li class='listOptionLvlThree'><a href="#"> \t More option \t </a> 
 
      </li> 
 
      <li class='listOptionLvlThree'><a href="#"> \t More option \t </a> 
 
      </li> 
 
      </ul> 
 
     </li> 
 

 

 

 
     <li><a href="">Exterior</a> 
 
      <ul class="submenutwo"> 
 
      <li class='listOptionLvlThree'><a href="#"> \t More option \t </a> 
 
      </li> 
 
      <li class='listOptionLvlThree'><a href="#"> \t More option \t </a> 
 
      </li> 
 
      <li class='listOptionLvlThree'><a href="#"> \t More option \t </a> 
 
      </li> 
 
      <li class='listOptionLvlThree'><a href="#"> \t More option \t </a> 
 
      </li> 
 
      <li class='listOptionLvlThree'><a href="#"> \t More option \t </a> 
 
      </li> 
 
      <li class='listOptionLvlThree'><a href="#"> \t More option \t </a> 
 
      </li> 
 
      <li class='listOptionLvlThree'><a href="#"> \t More option \t </a> 
 
      </li> 
 
      <li class='listOptionLvlThree'><a href="#"> \t More option \t </a> 
 
      </li> 
 
      </ul> 
 
     </li> 
 

 

 
     <li><a href="">Services</a> 
 
      <ul class="submenutwo"> 
 
      </ul> 
 
     </li> 
 
     </ul> 
 
    </li> 
 

 

 
    </ul> 
 
</nav>

Answer 1

はここにあなたが

/* 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;*/ 
    display: none; 
    -webkit-transition: all 0.5s ease-out; 
} 


.submenutwo { 
    display: none 
} 

.submenu li:hover .submenutwo { 
    display: block; 
    /*min-height:300px;*/ 
    /*height:auto;*/ 

}