Good day dear. Can you please tell me how to use CSS to delay the disappearance of list sublevels? I will give an example

ul{ list-style-type: none; } li:hover{ background-color: #0ff; cursor:pointer; } .firstLevl{ width: 100%; } .firstLevl> li{ float: left; position: relative; padding-left: 20px; border: 1px solid #000; } .popUp:hover .secondlevl{ display: block; transition: display 1s; } .secondlevl{ display: none; position: absolute; top: 100px; left: -10px; } .secondlevl li{ width: 150px; border: 1px solid #000; } .popUp2:hover .thirdLevel{ display: block; } .thirdLevel{ display:none; position: absolute; left: 120%; top: 180%; } 
 <ul class="firstLevl"> <li class="popUp">Первый уровень +++ <ul class="secondlevl"> <li class="popUp2"> Второй уровень +++ <ul class="thirdLevel"> <li>Третий уровень</li> <li>Третий уровень</li> <li>Третий уровень</li> <li>Третий уровень</li> <li>Третий уровень</li> </ul> </li> <li>Второй уровень</li> <li>Второй уровень</li> <li>Второй уровень</li> <li>Второй уровень</li> </ul> </li> <li>Первый уровень</li> <li>Первый уровень</li> <li>Первый уровень</li> <li>Первый уровень</li> </ul>

The task is how to get to the elements of the 3rd sublevel, if the lists are positioned in this way? I tried to make a delay for the transition display: none -> display: block but it did not work for me. I hope that you advise me something sensible? I can, of course, gash on JS, but I would like to hear an option on CSS If that is possible

    2 answers 2

    Not in the wrong direction. You do not need a delay, but just change the way in which the nested block is positioned.

     ul { list-style-type: none; } li { background-color: white; } li:hover { background-color: #0ff; cursor: pointer; } .firstLevl { width: 100%; } .firstLevl> li { float: left; position: relative; padding-left: 20px; border: 1px solid #000; } .popUp:hover .secondlevl { display: block; transition: display 1s; } .secondlevl { display: none; position: absolute; top: 0; padding-top: 100px; left: -10px; background-color: red; } .secondlevl li { width: 150px; border: 1px solid #000; } .popUp2:hover .thirdLevel { display: block; } .thirdLevel { display: none; position: absolute; left: 100%; top: 0; padding-top: 180%; padding-left: 20%; background-color: blue; } 
     <ul class="firstLevl"> <li class="popUp">Первый уровень +++ <ul class="secondlevl"> <li class="popUp2"> Второй уровень +++ <ul class="thirdLevel"> <li>Третий уровень</li> <li>Третий уровень</li> <li>Третий уровень</li> <li>Третий уровень</li> <li>Третий уровень</li> </ul> </li> <li>Второй уровень</li> <li>Второй уровень</li> <li>Второй уровень</li> <li>Второй уровень</li> </ul> </li> <li>Первый уровень</li> <li>Первый уровень</li> <li>Первый уровень</li> </ul>

    • I didn’t quite understand why changing the positioning method. (Suppose, according to the condition of the task, under the multi-level list there is a picture, or a slider, which you should see the list items) Your method is good only if the second level is not close to the first but vertically above it. Up to the third level you do not bring the cursor like this by increasing the padding - BlackStar1991
    • @ BlackStar1991 from what I will not bring? you just need to change the positioning method of the third level. I figured that if I set an example, you will figure it out further. But once not figured out, edited your answer. Color highlighted areas of the cursor over which allows you to see the submenu. - Andrey Fedorov

    Replace display with visibility and set a different transition for .secondLevl (delay 2 seconds) and .secndLevl:hover (without delay).

     ul{ list-style-type: none; } li:hover{ background-color: #0ff; cursor:pointer; } .firstLevl{ width: 100%; } .firstLevl> li{ float: left; position: relative; padding-left: 20px; border: 1px solid #000; } .popUp:hover .secondlevl{ visibility: visible; transition: visibility .2s; } .secondlevl{ visibility: hidden; position: absolute; top: 100px; left: -10px; transition: visibility .2s 2s; } .secondlevl li{ width: 150px; border: 1px solid #000; } .popUp2:hover .thirdLevel{ display: block; } .thirdLevel{ display:none; position: absolute; left: 120%; top: 180%; } 
     <ul class="firstLevl"> <li class="popUp">Первый уровень +++ <ul class="secondlevl"> <li class="popUp2"> Второй уровень +++ <ul class="thirdLevel"> <li>Третий уровень</li> <li>Третий уровень</li> <li>Третий уровень</li> <li>Третий уровень</li> <li>Третий уровень</li> </ul> </li> <li>Второй уровень</li> <li>Второй уровень</li> <li>Второй уровень</li> <li>Второй уровень</li> </ul> </li> <li>Первый уровень</li> <li>Первый уровень</li> <li>Первый уровень</li> <li>Первый уровень</li> </ul>