伪类嵌套/ SCSS Linter警告

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>