Made a drop down menu. Everything works, I am only interested in one question: is everything correct, can this code be considered good?
* { box-sizing: border-box; margin:0; padding:0; } .q1{ margin-left:40px; margin-top:50px; border:1px black solid; text-align:center; } .q2{ display:inline-block; position:relative; vertical-align:top; z-index:1000; overflow:hidden; height:42px; transition:all 1s; width:17%; } .q2 a{ display:inline-block; text-decoration:none; padding:12px 0px; width:100%; text-align:center; background:black; } .q3{ position:absolute; top:-90px; right:0; width:100%; transition:all 1s; z-index:-1; } .q3 li{ display:block; } .q3 a{ display:inline-block; padding:12px 0px; width:100%; text-align:center; background:red; margin-bottom:3px; } .q2:hover .q3{ top:45px; } .q2:hover{ height:177px; } .q3 li:last-child a{ margin-bottom:0; } <ul class="q1"> <li class="q2"> <a href="#">123</a><ul class="q3"><li><a href="#">111</a></li><li><a href="#">222</a></li><li><a href="#">333</a></li></ul> </li> <li class="q2"><a href="#">123</a><ul class="q3"><li><a href="#">111</a></li><li><a href="#">222</a></li><li><a href="#">333</a></li></ul></li> </ul> 