css에 메뉴에 대한 질문입니다. 채택완료

css 왕초보입니다ㅠ

  ->       

현재 메뉴이구요                          이렇게 바꾸고싶습니다

메뉴 A-1을 누르거나 A-2를 누를때마다 밑에 검은메뉴들이 전체로 나오게 하고싶은데 어디 부분을 건드려야 될지 모르겠습니다 

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

이렇습니다  ㅠㅠㅠ 어디부분을 고쳐야될지 가르켜주시면 정말 감사하겠습니다