css만을 이용한 전체펼침메뉴

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

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

html소스는 

<div class="header">
      <ul>
          <li>a
            <ul>
              <li class="nav_detail"><a href="#">green</a></li>
              <li class="nav_detail"><a href="#">green</a></li>
              <li class="nav_detail"><a href="#">green</a></li>
              <li class="nav_detail"><a href="#">green</a></li>
              <li class="nav_detail"><a href="#">green</a></li>
            </ul>
          </li>
          <li>b
            <ul>
             <li class="nav_detail"><a href="#">green</a></li>
              <li class="nav_detail"><a href="#">green</a></li>
              <li class="nav_detail"><a href="#">green</a></li>
              <li class="nav_detail"><a href="#">green</a></li>
              <li class="nav_detail"><a href="#">green</a></li>
            </ul>
          </li>
        </ul>
      </div>

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;
}