Pseudo-class nesting / SCSS Linter Warning

Question

I'm relatively new to SCSS and try to improve my skills using a linter. I have this little example, where I want to display a submenu only if the parent menu-item is hovered. While this code is working, the linter gives me a "Class should be nested within its parent Pseudo-class".

.menu-item { 
  .submenu {
    display: none;
  }

  &:hover .submenu {
    display: block;
  }
}

<ul>
  <li class='menu-item'>
    <a href=''>
      Menu 1
    </a>
    <ul class='submenu'>
      <li>Submenu 1.1</li>
      <li>Submenu 1.2</li>
    </ul>
  </li>
</ul>

I have no idea how the :hover part could be nested into the .submenu part. Can you help?

Answer 1

Your SASS code will compiled to the below CSS code which is working fine. Just make sure that your SASS code is properly compiling to CSS.

.menu-item .submenu {
  display: none;
}

.menu-item:hover .submenu {
  display: block;
}

<ul>
  <li class='menu-item'>
    <a href=''>
      Menu 1
    </a>
    <ul class='submenu'>
      <li>Submenu 1.1</li>
      <li>Submenu 1.2</li>
    </ul>
  </li>
</ul>

Answer 2

I found the solution and it was so simple, I just had to nest the .submenu into the hover part :(

.menu-item { 
  .submenu {
    display: none;
  }

  &:hover {
    .submenu {
      display: block;
    }
  }
}

<ul>
  <li class='menu-item'>
    <a href=''>
      Menu 1
    </a>
    <ul class='submenu'>
      <li>Submenu 1.1</li>
      <li>Submenu 1.2</li>
    </ul>
  </li>
</ul>