I need to display the sub lists using hover

i am having trouble displaying the sub-list with number 2.1.1
using HOVER

Document #primary{ height: 300px; width: 300px; border-radius: 5%; background-color: black; color: yellow; padding-top: 1%; }

ol{
counter-reset: list;
}

li{
display:block;
}

li:before{
content: counters(list, “.”) " ";
counter-increment: list;
}

.hide{
display:none;
}

.parent:hover .hide{
display:block;
}

  1. first
    1. first.first
    2. first.second
  2. second
    1. second.first
      1. second.first.first
      2. second.first.second
  3. third
    1. third.first
    2. third.second

I hope I’ve cleared your doubt. I ask you to please rate your experience here
Your feedback is very important. It helps us improve our platform and hence provide you
the learning experience you deserve.

On the off chance, you still have some questions or not find the answers satisfactory, you may reopen
the doubt.

I hope I’ve cleared your doubt. I ask you to please rate your experience here
Your feedback is very important. It helps us improve our platform and hence provide you
the learning experience you deserve.

On the off chance, you still have some questions or not find the answers satisfactory, you may reopen
the doubt.