css로이 중첩 목록을 미화하는 방법은 무엇입니까?

-1

중첩 목록이있는이 드롭 다운 메뉴를 만들었습니다. 그러나 어떻게 조정해도 height, 모든 요소를 .submenutwo에 표시하는 것은 불가능합니다. 또한 .submenutwo 호버를 사용하면 더 이상 다른 옵션을 볼 수 없습니다. CSS 또는 아주 최소한의 자바 스크립트로 이것을 고칠 수있는 쉬운 방법이 있습니까? height ~ min-height을 조정하는 기능이 작동하지 않습니다. 나는 onclick이 hovering보다 낫다고 생각한다.css로이 중첩 목록을 미화하는 방법은 무엇입니까?

/* 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>

출처

2016-08-26 Bic Mitchun

다음은

/* 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;*/ 

}

출처

2016-08-26 13:41:30 troy

감사합니다 :) 원하는 것을 찾을 수 있습니다, CSS의 코드입니다! 정확히 필요한 것! –

css로이 중첩 목록을 미화하는 방법은 무엇입니까?

답변

관련 문제