There is this html markup:

<a href="#" class="butt_lang f_left">en</a> <ul class="lang_list"> <li> <a href="#" class="top_lang">de</a> </li> <li> <a href="#" class="top_lang">fr</a> </li> <li> <a href="#" class="top_lang">ru</a> </li> <li> <a href="#" class="top_lang">esp</a> </li> </ul>

And css:

 .butt_lang { background: rgba(0, 0, 0, 0) url("../img/polygon.png") no-repeat scroll 33px 20px; display: block; height: 50px; line-height: 40px; text-align: center; width: 40px; &:hover .lang_list { display: block; width: 25px; float: left; } } .lang_list { display: none; }

The problem is that when hover on butt_lang, lang_list is not displayed. What could be the problem? thank

    2 answers 2

     &:hover .lang_list {

    Because it is not , but , , or almost any (?) Any preprocessor.

    Css-rules are written without nesting each other and without ampersands.

    And the problem is that .lang_list not inside. Here is the correct option:

     .butt_lang { background: rgba(0, 0, 0, 0) url("../img/polygon.png") no-repeat scroll 33px 20px; display: block; height: 50px; line-height: 40px; text-align: center; width: 40px; } .butt_lang:hover + .lang_list, .lang_list:hover { display: block; width: 25px; float: left; } .lang_list { display: none; margin: 0; /* Иначе мышь перевести на список не выйдет */ } 
     <a href="#" class="butt_lang f_left">en</a> <ul class="lang_list"> <li> <a href="#" class="top_lang">de</a> </li> <li> <a href="#" class="top_lang">fr</a> </li> <li> <a href="#" class="top_lang">ru</a> </li> <li> <a href="#" class="top_lang">esp</a> </li> </ul>

    • Well, you decided to solve the question in the root, I did not know what I was writing on - Nikita Shchypylov
    • one
      @ Nikita Schipilov, there is the text of the question, where it says css. There is a single question mark - css. There is a code that differs from css only in one place. Well, is it logical? - Qwertiy ♦
    • Okay, I was wrong that I did not put the tag. But lessa has 79 subscribers, and css 5k has Nikita Shchypylov
    • @ Nikita Schipilov, the answer is updated. - Qwertiy ♦
    • Thanks for the reply - Nikita Shchypylov

    The error was here: &:hover + .lang_list { - a and ul tags are adjacent.
    If the task is about preprocessors, then the correct answer is this, in order to use the proposed nesting:

     .butt_lang { background: rgba(0, 0, 0, 0) url("../img/polygon.png") no-repeat scroll 33px 20px; display: block; height: 50px; line-height: 40px; text-align: center; width: 40px; &:hover + .lang_list { display: block; width: 25px; float: left; } } .lang_list { display: none; } 
     <a href="#" class="butt_lang f_left">en</a> <ul class="lang_list"> <li> <a href="#" class="top_lang">de</a> </li> <li> <a href="#" class="top_lang">fr</a> </li> <li> <a href="#" class="top_lang">ru</a> </li> <li> <a href="#" class="top_lang">esp</a> </li> </ul>