How to write this in SASS?

In SASS, you can write this CSS code as follows:

nav {
  ul {
    li {
      &:hover {
              > ul {
             display: inherit;
                   }
              }
       }
    }
}

The “&” symbol refers to the parent selector, and “>” is the direct descendant combinator. The :hover pseudo-class is used to apply styles to an element when the user hovers over it with the mouse.

You can also write this code using the @extend directive:

%show-submenu {
    display: inherit;
}

nav {
    ul {
       li {
          &:hover {
                  > ul {
                    @extend %show-submenu;
                    }
              }
          }
     }
}

This code creates a %show-submenu placeholder class that is extended by the ul element when the parent li element is hovered over. The “%” symbol indicates that the %show-submenu class is a placeholder and will not generate any CSS on its own. It is used as a way to share styles across different rules in a stylesheet.