css만을 이용한 전체펼침메뉴 채택완료

메뉴 a을 누르거나 b를 누를때마다 밑에 메뉴들이 전체로 나오게 하고싶은데 어디 부분을 건드려야 될지 모르겠습니다 jquery안쓰고 css만 이용해야되구 구조바꿔도 상관없습니다ㅜ 

일주일동안 고민중인데 가르켜주세영ㅠ

html소스는 

css 소스는

.header{   font-weight: bold;   width: 100%;   height: 20px;   box-sizing: border-box; }

body{   list-style: none; }

.header ul {     float: right;     height: 100%;     width: 40%;     font-size: 20px; } .header li ul .nav_detail a:hover {     background: black;     color: white; } body, h1, h2, h3, ul, ol, li {     padding: 0;     margin: 0; } .header li ul .nav_detail a {     width: 100%;     height: 100%;     position: absolute;     top: 0;     left: 0;     color: #fff;     text-align: center;     text-decoration: none; } .header li ul .nav_detail {     position: relative;     text-align: left;     font-size: 14px;     font-weight: bold;     color: #fff;     background: black;     line-height: 40px;     list-style: none;     width: 100%;     height: 40px;     cursor: pointer;     z-index: 9999; } ul {     display: block;     list-style-type: disc;     margin-block-start: 1em;     margin-block-end: 1em;     margin-inline-start: 0px;     margin-inline-end: 0px;     padding-inline-start: 40px; } .header>ul>li:hover {     color: gray; } .header li:hover {     background-color: inherit; } .header li {     position: relative;     text-align: center;     list-style: none;     float: left;     line-height: 20px;     width: 10%;     color: #444444;     cursor: pointer; } .header li:hover > ul {     display: block; } .header li ul {     display: none;     position: relative;     z-index: 9999;     width: 100%;     z-index: 9999; }