html - How to target accordion li when hovering and targeting the first child? -

i want target strictly menu when hovering. menu change color , size without affecting li menu. how that?

note suppose accordion menu. nav (sub) expands when hovering on menu. have spent great deal of time cannot target menu without messing sub.

<nav id="menu_box">   <ul class="menu">     <li> <a href="#">menu</a>       <ul>         <li><a href="#">sub</a></li>         <li><a href="#">sub</a></li>         <li><a href="#">sub</a></li>       </ul>     </li>     <li> <a href="#">menu</a>       <ul>         <li><a href="#">sub</a></li>         <li><a href="#">sub</a></li>         <li><a href="#">sub</a></li>       </ul>     </li>     <li> <a href="#">menu</a>       <ul>         <li><a href="#">sub</a></li>         <li><a href="#">sub</a></li>      </ul>     </li>    </ul> </nav> 

here css:

https://jsfiddle.net/kgrxql0k/1/

maybe this:

.menu > li li a:hover {     color: pink; } 

---

#cssmenu,  #cssmenu ul,  #cssmenu ul li,  #cssmenu ul li {    margin: 0;    padding: 0;    border: 0;    list-style: none;    line-height: 1;    display: block;    position: relative;    -webkit-box-sizing: border-box;    -moz-box-sizing: border-box;    box-sizing: border-box;  }  #cssmenu {    width: 220px;    font-family: raleway, sans-serif;    color: #ffffff;  }  #cssmenu ul ul {    display: none;  }  #cssmenu > ul > li.active > ul {    display: block;  }  .align-right {    float: right;  }  #cssmenu > ul > li > {    padding: 16px 22px;    cursor: pointer;    z-index: 2;    font-size: 16px;    text-decoration: none;    color: #ffffff;    -webkit-transition: color .2s ease;    -o-transition: color .2s ease;    transition: color .2s ease;  }  #cssmenu > ul > li > a:hover {    color: #d8f3f0;  }  #cssmenu ul > li.has-sub > a:after {    position: absolute;    right: 26px;    top: 19px;    z-index: 5;    display: block;    height: 10px;    width: 2px;    content: "";    -webkit-transition: 0.1s ease-out;    -moz-transition: 0.1s ease-out;    -ms-transition: 0.1s ease-out;    -o-transition: 0.1s ease-out;    transition: 0.1s ease-out;  }  #cssmenu ul > li.has-sub > a:before {    position: absolute;    right: 22px;    top: 23px;    display: block;    width: 10px;    height: 2px;    content: "";    -webkit-transition: 0.1s ease-out;    -moz-transition: 0.1s ease-out;    -ms-transition: 0.1s ease-out;    -o-transition: 0.1s ease-out;    transition: 0.1s ease-out;  }  #cssmenu ul > li.has-sub.open > a:after,  #cssmenu ul > li.has-sub.open > a:before {    -webkit-transform: rotate(45deg);    -moz-transform: rotate(45deg);    -ms-transform: rotate(45deg);    -o-transform: rotate(45deg);    transform: rotate(45deg);  }  #cssmenu ul ul li {    padding: 14px 22px;    cursor: pointer;    z-index: 2;    font-size: 14px;    text-decoration: none;    color: #dddddd;    -webkit-transition: color .2s ease;    -o-transition: color .2s ease;    transition: color .2s ease;  }  #menu ul li:hover {    color: pink;  }  #cssmenu ul ul ul li {    padding-left: 32px;  }  #cssmenu ul ul li a:hover {    color: #ffffff;  }  #cssmenu ul ul > li.has-sub > a:after {    top: 16px;    right: 26px;  }  #cssmenu ul ul > li.has-sub > a:before {    top: 20px;  }  .menu {    margin: 0 auto;    padding: 0;    width: 350px;  }  .menu li {    list-style: none;  }  .menu li {    display: table;    margin-top: 1px;    padding: 14px 10px;    width: 100%;    text-decoration: none;    text-align: left;    vertical-align: middle;    color: #ccc;    font-weight: 600;    font-size: 18px;    overflow: hidden;    -webkit-transition-property: background;    -webkit-transition-duration: 0.4s;    -webkit-transition-timing-function: ease-out;    transition-property: background;    transition-duration: 0.4s;    transition-timing-function: ease-out;  }  .menu > li:first-child {    margin-top: 0;  }  .menu >li a:hover a:first-child {    font-size: 25px;    color: #547b16;  }  .menu li a:hover {    ] -webkit-transition-property: background;    -webkit-transition-duration: 0.2s;    -webkit-transition-timing-function: ease-out;    transition-property: background;    transition-duration: 0.2s;    transition-timing-function: ease-out;  }  .menu li ul {    margin: 0;    padding: 0;  }  .menu li li {    display: block;    margin-top: 0;    padding: 0 10px;    height: 0;    color: #1f3d39;    -webkit-transition-property: all;    -webkit-transition-duration: 0.5s;    -webkit-transition-timing-function: ease-out;    transition-property: all;    transition-duration: 0.5s;    transition-timing-function: ease-out;  }  .menu > li:hover li {    display: table;    margin-top: 1px;    padding: 10px;    width: 100%;    height: 1em;    -webkit-transition-property: all;    -webkit-transition-duration: 0.3s;    -webkit-transition-timing-function: ease-out;    transition-property: all;    transition-duration: 0.3s;    transition-timing-function: ease-out;  }  .menu > li:hover li a:hover {    -webkit-transition-property: background;    -webkit-transition-duration: 0.2s;    -webkit-transition-timing-function: ease-out;    transition-property: background;    transition-duration: 0.2s;    transition-timing-function: ease-out;  }  .menu > li li a:hover {    color: pink;  }

<nav id="menu_box">    <ul class="menu">      <li> <a href="#">menu</a>        <ul>          <li><a href="#">sub</a>          </li>          <li><a href="#">sub</a>          </li>          <li><a href="#">sub</a>          </li>        </ul>      </li>      <li> <a href="#">menu</a>        <ul>          <li><a href="#">sub</a>          </li>          <li><a href="#">sub</a>          </li>          <li><a href="#">sub</a>          </li>        </ul>      </li>      <li> <a href="#">menu</a>        <ul>          <li><a href="#">sub</a>          </li>          <li><a href="#">sub</a>          </li>        </ul>      </li>      </ul>  </nav>