Need advice for use a "target" property in menu

Question

I'm trying to make a drop-down menu that opens by click. I am trying to use the target property how below for this, but in vain. Could someone suggest how to fix the code?

 :target + .parent > ul {
    display:block;
    position:absolute;
    z-index:9999;
   
}

.parent {
    display: block;
    position: relative;
    float: left;
    line-height: 30px;
    background-color: black;
    border-right: #CCC 1px solid;
}

.parent a {
    margin: 10px;
    color: #FFFFFF;
    text-decoration: none;
}

 :target + .parent > ul {
    display:block;
    position:absolute;
    z-index:9999;
   
}

.child {
    display: none;
}

.child li {
    background-color: #E4EFF7;
    line-height: 30px;
    border-bottom: #CCC 1px solid;
    border-right: #CCC 1px solid;
    width: 100%;
    background-color: black;
}

.child li a {
    color: #FFF;
    color: red;
}

ul {
    list-style: none;
    margin: 0;
    padding: 0px;
    min-width: 10em;
}

ul ul ul {
    /* left: 100%;
    top: 0;
    margin-left:1px;
     */
}

li:hover {
    background-color: red;
}

.parent li:hover {
    background-color: #F0F0F0;
}

.expand {
    font-size: 12px;
    float: right;
    margin-right: 5px;
    color: red;
}

nav {
    margin: 0 auto;
    display: table;
    text-align: center;
}

nav ul {
    text-align: center;
}

<nav>
   <ul id="menu">
      <li class="parent">
         <a href="#">CAT 1</a>
         <ul class="child">
            <li class="parent">
               <a href="#">Video Games <span class="expand">    
               &#9660;</span></a>
               <ul class="child">
                  <li><a href="#">Car</a></li>
                  <li class="parent">
                     <a href="#">Bike Race<span class="expand">     
                     &#9660;</span></a>
                     <ul class="child">
                        <li><a href="#">Yoyo</a></li>
                        <li><a href="#">Doctor Kit</a></li>
                     </ul>
                  <li><a href="#">Fishing</a></li>
               </ul>
            </li>
            <li><a href="#">Barbies</a></li>
            <li><a href="#">Teddy Bear</a></li>
            <li><a href="#">Golf Set</a></li>
         </ul>
      </li>
      <li class="parent">
         <a href="#">CAT 2</a>
         <ul class="child">
            <li><a href="#">Yoyo</a></li>
            <li><a href="#">Doctor Kit</a></li>
            <li class="parent">
               <a href="#">Fun Puzzle<span class="expand">  
               &#9660;</span></a>
               <ul class="child">
                  <li><a href="#" nowrap>Cards</a></li>
                  <li><a href="#" nowrap>Numbers</a></li>
               </ul>
            </li>
            <li><a href="#">Uno Cards</a></li>
         </ul>
      </li>
      <li class="parent"><a href="#">CAT 3</a>
      <li class="parent"><a href="#">CAT 4</a>
      <li class="parent"><a href="#">CAT 5</a>
      <li class="parent"><a href="#">CAT 6</a>
      <li class="parent">
         <a href="#">CAT 7</a>
         <ul class="child">
            <li><a href="#">Battery Toys</a></li>
            <li class="parent">
               <a href="#">Remote Toys <span class="expand">    
               &#9660;</span></a>
               <ul class="child">
                  <li><a href="#">Cars</a></li>
                  <li><a href="#">Aeroplane</a></li>
                  <li><a href="#">Helicopter</a></li>
               </ul>
            </li>
            <li><a href="#">Soft Toys</a>
            </li>
            <li><a href="#">Magnet Toys</a></li>
         </ul>
      </li>
   </ul>
</nav>