ul.nav { margin: 0 auto; width: 666px; } ul.nav li { display: inline-block; list-style: none; } ul.nav li a { text-decoration: none; display: block; width: 100px; height: 50px; padding-top: 15px; text-align: center; background: grey; color: snow; font-size: 1.6rem; border-radius: 50%; transition: 2s } ul.nav li ul { display: none; } ul.nav li:hover { position: relative; } ul.nav a:hover { background: blue; } ul.nav li:hover>ul { display: block; position: absolute; top: 65px; left: -40px; } ul.nav li:hover ul li ul { position: absolute; top: -130px; left: 64px; } 
 <ul class="nav"> <li><a href="#">menu1</a></li> <li><a href="#">menu2</a> <ul> <li><a href="#">drop1</a></li> <li><a href="#">drop1</a> <li><a href="#">drop1</a> <ul> <li><a href="#">drop2</a></li> <li><a href="#">drop2</a> <li><a href="#">drop2</a> <ul> <li><a href="#">drop3</a></li> <li><a href="#">drop3</a> <li><a href="#">drop3</a> <ul class="last"> <li><a href="#">drop4</a></li> <li><a href="#">drop4</a></li> <li><a href="#">drop4</a> </ul> </li> </ul> </li> </ul> </li> </ul> </li> <li><a href="#">menu3</a></li> <li><a href="#">menu4</a></li> <li><a href="#">menu5</a></li> <li><a href="#">menu6</a></li> </ul>

Picture

  • the point is that it does not work ( - Natalya Kamkova
  • and you need to write the correct styles, if you wrote that li is an inline-block, then all li will be such .. - user33274

1 answer 1

This is how it should be

 *{ margin:0; padding:0; list-style:none; text-decoration:none; box-sizing:border-box; } li{ position:relative; padding:4px 10px; border:1px solid #000; border-radius:30%; background:#fff; } .nav0,.nav4{display:flex;} ul{transition:.5s;transition-delay:.4s;} .nav1{position:absolute;top:100%;left:0;visibility:hidden;} .nav2,.nav3,.nav4{position:absolute; top:0;left:100%;visibility:hidden;} .nav0 li:last-child:hover .nav1, .nav1 li:last-child:hover .nav2, .nav2 li:last-child:hover .nav3, .nav3 li:last-child:hover .nav4{visibility:visible;} 
 <ul class="nav0"> <li><a href="#">menu1</a></li> <li><a href="#">menu2</a> <ul class="nav1"> <li><a href="#">drop1</a></li> <li><a href="#">drop1</a> <li><a href="#">drop1</a> <ul class="nav2"> <li><a href="#">drop2</a></li> <li><a href="#">drop2</a> <li><a href="#">drop2</a> <ul class="nav3"> <li><a href="#">drop3</a></li> <li><a href="#">drop3</a> <li class="a"><a href="#">drop3</a> <ul class="nav4"> <li><a href="#">drop4</a></li> <li><a href="#">drop4</a></li> <li><a href="#">drop4</a> </ul> </li> </ul> </li> </ul> </li> </ul> </li> </ul>