HTML menu with CSS hover - html

Question

I'm working on an HTML menu.
I have a problem with the "L3 submenu" (Item-221, Item-222).
When I "mouse in" to Item-22, L3 is displayed. It's ok.
But I can't click either Item-221 or Item-222.
If I "mouse out" Item-22, then L3 disappear.
Is there a solution for this using (only) CCS?
CSS code:
ul {
background-color: #c4c4c4;
list-style-type: none;
display: flex;
}
li {
padding: 5px 10px 5px 10px;
white-space: nowrap;
position: relative;
}
li:hover {
background-color: #02DB02;
}
.menu li>ul {
padding: 10px 13px 10px 13px;
position: absolute;
display: none;
top: calc(100%);
left: -8px;
}
#it_2:hover #ul_2, #it_22:hover #ul_3 {
display: block;
}
.menu>li>ul>li>ul {
top: -0.5em;
left: calc(100% + 10px);
}
HTML code:
<ul class="menu">
<li>Item-1</li>
<li id="it_2">Item-2
<ul id="ul_2">
<li>Item-21</li>
<li id="it_22">Item-22
<ul id="ul_3">
<li>Item-221</li>
<li>Item-222</li>
</ul>
</li>
</ul>
</li>
<li>Item-3</li>
</ul>

Answer 1

It is better to put padding on the list item so the sub-menu won't disappear
ul {
background-color: #c4c4c4;
list-style-type: none;
display: flex;
}
li {
padding: 5px 10px 5px 10px;
white-space: nowrap;
position: relative;
}
li:hover {
background-color: #02DB02;
}
.menu ul > li {
position:relative;
padding: 0 13px 0 13px;
}
.menu li>ul {
padding: 10px 0 10px 0;
position: absolute;
display: none;
top: calc(100%);
left: -8px;
}
#it_2:hover #ul_2, #it_22:hover #ul_3 {
display: block;
}
.menu>li>ul>li>ul {
position: absolute;
top: -0.5em;
left: calc(100%);
padding: 1em;
}
<ul class="menu">
<li>Item-1</li>
<li id="it_2">Item-2
<ul id="ul_2">
<li>Item-21</li>
<li id="it_22">Item-22
<ul id="ul_3">
<li>Item-221</li>
<li>Item-222</li>
</ul>
</li>
</ul>
</li>
<li>Item-3</li>
</ul>