Apply Hover on the Nested Class Navigation - css

Question

I have a mock up sample code below that displays a nested sub menu on my project
.navigation {
.cmp-navigation {
.cmp-navigation__group {
.cmp-navigation__item--level-0 {
display: inline-block;
padding: 10px;
.cmp-navigation__item-link {
color: red;
}
.cmp-navigation__group {
position: absolute;
display: block;
.cmp-navigation__item--level-1 {
.cmp-navigation__item-link {
color: yellow;
}
.cmp-navigation__group {
left: 100%;
position: absolute;
top: 0px;
.cmp-navigation__item--level-2 {
.cmp-navigation__item-link {
color: orange;
}
}
}
}
}
}
}
}
}
.navigation {
.cmp-navigation {
.cmp-navigation__group {
.cmp-navigation__item--level-0 {
display: inline-block;
padding: 10px;
.cmp-navigation__item-link {
color: red;
}
.cmp-navigation__group {
position: absolute;
display: block;
.cmp-navigation__item--level-1 {
.cmp-navigation__item-link {
color: yellow;
}
.cmp-navigation__group {
left: 100%;
position: absolute;
top: 0px;
.cmp-navigation__item--level-2 {
.cmp-navigation__item-link {
color: orange;
}
}
}
}
}
}
}
}
}
.cmp-navigation__item--level-1 {
display: none;
}
<div class="navigation aem-GridColumn aem-GridColumn--default--12">
<nav class="cmp-navigation" role="navigation" itemscope itemtype="http://schema.org/SiteNavigationElement">
<ul class="cmp-navigation__group">
<li class="cmp-navigation__item cmp-navigation__item--level-0">
Home
</li>
<li class="cmp-navigation__item cmp-navigation__item--level-0">
Equipments
<ul class="cmp-navigation__group">
<li class="cmp-navigation__item cmp-navigation__item--level-1">
Trucks
</li>
<li class="cmp-navigation__item cmp-navigation__item--level-1">
Woods
</li>
</ul>
</li>
</ul>
</nav>
</div>
And the output is something like this
The code above works fine but my problem is how to apply the hover on sub menu. My target for this nested view is to apply the hide and show on hover. Thanks for the help

Answer 1

First you need to hide the submenu items using display: none. Then you need to add :hover to the parent of the submenu to change from display: none to display: block. Here's an example.
nav ul li ul li {
display: none;
}
nav ul li:hover ul li {
display: block;
}
<div class="navigation aem-GridColumn aem-GridColumn--default--12">
<nav class="cmp-navigation" role="navigation" itemscope itemtype="http://schema.org/SiteNavigationElement">
<ul class="cmp-navigation__group">
<li class="cmp-navigation__item cmp-navigation__item--level-0">
Home
</li>
<li class="cmp-navigation__item cmp-navigation__item--level-0">
Equipments
<ul class="cmp-navigation__group">
<li class="cmp-navigation__item cmp-navigation__item--level-1">
Trucks
</li>
<li class="cmp-navigation__item cmp-navigation__item--level-1">
Woods
</li>
</ul>
</li>
</ul>
</nav>
</div>