The question is, is it possible to smoothly appear a dropdown block without using jS jQuery, etc.? If so, how? transition did not work ...

 .menu:focus ~ .dropdown{ display: block; } .main-head .dropdown{ position: absolute; margin-top: 85px; right: 210px; display: none; } 
 <header class="main-head"> <div id="logo"> <p>Smart</p> </div> <button class="button menu">Кнопка</button> <ul class="dropdown"> <li> <a href="">Menu1</a> </li> <li> <a href="">Menu2</a> </li> <li> <a href="">Menu3</a> </li> <li> <a href="">Menu4</a> </li> </ul> </header>

    3 answers 3

    transition does not apply to the display: none | block; property display: none | block; display: none | block;

    Option 1 opacity :

     .menu:focus ~ .dropdown{ opacity: 1; } .main-head .dropdown{ position: absolute; margin-top: 85px; right: 210px; opacity: 0; transition: all .5s ease-in-out; } 
     <header class="main-head"> <div id="logo"> <p>Smart</p> </div> <button class="button menu">Кнопка</button> <ul class="dropdown"> <li> <a href="">Menu1</a> </li> <li> <a href="">Menu2</a> </li> <li> <a href="">Menu3</a> </li> <li> <a href="">Menu4</a> </li> </ul> </header>

    Option 2 scale :

     .menu:focus ~ .dropdown{ transform: scale(1); } .main-head .dropdown{ position: absolute; margin-top: 85px; right: 210px; transform: scale(0); transition: all .3s ease-in-out; } 
     <header class="main-head"> <div id="logo"> <p>Smart</p> </div> <button class="button menu">Кнопка</button> <ul class="dropdown"> <li> <a href="">Menu1</a> </li> <li> <a href="">Menu2</a> </li> <li> <a href="">Menu3</a> </li> <li> <a href="">Menu4</a> </li> </ul> </header>

    Option 3 translateX :

     .menu:focus ~ .dropdown{ transform: translateX(0%); } .main-head .dropdown{ position: absolute; margin-top: 85px; right: 210px; transform: translateX(-1000%); transition: all .3s ease-in-out; } 
     <header class="main-head"> <div id="logo"> <p>Smart</p> </div> <button class="button menu">Кнопка</button> <ul class="dropdown"> <li> <a href="">Menu1</a> </li> <li> <a href="">Menu2</a> </li> <li> <a href="">Menu3</a> </li> <li> <a href="">Menu4</a> </li> </ul> </header>

    Option 4 translateY :

     .menu:focus ~ .dropdown{ transform: translateY(0%); } .main-head .dropdown{ position: absolute; margin-top: 85px; right: 210px; transform: translateY(-1000%); transition: all .3s ease-in-out; } 
     <header class="main-head"> <div id="logo"> <p>Smart</p> </div> <button class="button menu">Кнопка</button> <ul class="dropdown"> <li> <a href="">Menu1</a> </li> <li> <a href="">Menu2</a> </li> <li> <a href="">Menu3</a> </li> <li> <a href="">Menu4</a> </li> </ul> </header>

    Option with absolute :

     body { overflow: hidden; } .menu:focus ~ .dropdown{ right: 210px; } .main-head .dropdown{ position: absolute; margin-top: 85px; right: -9999px; transition: all .5s ease-in-out; } 
     <header class="main-head"> <div id="logo"> <p>Smart</p> </div> <button class="button menu">Кнопка</button> <ul class="dropdown"> <li> <a href="">Menu1</a> </li> <li> <a href="">Menu2</a> </li> <li> <a href="">Menu3</a> </li> <li> <a href="">Menu4</a> </li> </ul> </header> 

       .dropdown { position: relative; overflow: hidden; margin-top: 85px; height: 0px; width: 100px; } @keyframes down1 { 0% { height: 0; } 10% { height: 10; } 25% { height: 25px; } 40% { height: 40; } 50% { height: 50px; } 60% { height: 60; } 75% { height: 75px; } 80% { height: 80; } 100% { height: 100px; } } .menu:focus ~ .dropdown { outline: 1px solid #ccc; animation-name: down1; animation-duration: 1s; animation-timing-function: ease-in; height: 100px; } 
       <header class="main-head"> <div id="logo"> <p>Smart</p> </div> <button class="button menu">Кнопка</button> <div class="dropdown"> <div> <a href="">Menu1</a> </div> <div> <a href="">Menu2</a> </div> <div> <a href="">Menu3</a> </div> <div> <a href="">Menu4</a> </div> </div> </header>

        Try @keyframes when you click on the dropdown @keyframes will animate your ul .

        • let's say @keyframes, but if it's not HTML5 and CSS3, but below ... - Fox
        • it doesn't matter if browsers support css3 and HTML5 - David Kern