Apply Hover on the Nested Class Navigation

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;
}

And the output is something like this

Sample Output

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

user_7956933 · Answer

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;
}

Apply Hover on the Nested Class Navigation

1 Answers