The drop-down menu should appear smoothly according to the transition property: all linear 0.8s; but does not work.

.menu { display: flex; justify-content: flex-start; flex-wrap: nowrap; margin-left: 1%; height: auto; width: 100%; } .menu h3 { margin: 20px 20px 0 0; font-weight: normal; font-size: 18px; color: #a87f5c; cursor: pointer; font-style: italic; } .menu h3 a { text-decoration: none; color: #a87f5c; font-size: 18px; height: 30px; display: block; } .menu h3 a:hover { border-bottom: 2px solid #a87f5c; } .menu h3 a.selected { border-bottom: 2px solid #a87f5c; } .menu .dropdown { height: 0; transition: all linear 0.8s; } .menu .dropdown h3 { font-weight: bold; font-size: 18px; color: #a87f5c; } .menu .dropdown .dropdown_content { display: none; padding: 1em; margin-left: -0.8em; width: 180px; } .menu .dropdown:hover .dropdown_content { display: block; background-color: #a87f5c; opacity: 0.98; color: white; box-shadow: -1px -1px 5px 0 #a87f5c; } .menu .dropdown .dropdown_content a { text-decoration: none; color: white; font-size: 18px; text-align: left; display: block; transition: .6s all ease; margin-bottom: 5px; white-space: nowrap; letter-spacing: .03em; font-style: italic; } .menu .dropdown .dropdown_content a:hover { color: white; margin-left: 19px; } 
  <div class="menu"> <h3><a href="pages/main.html" class="selected">Главная</a></h3> <div class="dropdown"> <h3 href="pages/production.html" сlass="droplink">Продукция / портфолио</h3> <div class="dropdown_content"> <a href="pages/tables.html">Столы</a> <a href="pages/storage.html">Мебель для хранения</a> <a href="pages/interior.html">Интерьер</a> </div> </div> <h3><a href="pages/contacts.html">Контакты</a></h3> </div>

    1 answer 1

    You transition pointed to the wrong selector.

     .menu { display: flex; justify-content: flex-start; flex-wrap: nowrap; margin-left: 1%; height: auto; width: 100%; } .menu h3 { margin: 20px 20px 0 0; font-weight: normal; font-size: 18px; color: #a87f5c; cursor: pointer; font-style: italic; } .menu h3 a { text-decoration: none; color: #a87f5c; font-size: 18px; height: 30px; display: block; } .menu h3 a:hover { border-bottom: 2px solid #a87f5c; } .menu h3 a.selected { border-bottom: 2px solid #a87f5c; } .menu .dropdown { height: 0; } .menu .dropdown h3 { font-weight: bold; font-size: 18px; color: #a87f5c; } .menu .dropdown .dropdown_content { transition: all linear 0.8s; padding: 1em; margin-left: -0.8em; width: 180px; opacity: 0; } .menu .dropdown:hover .dropdown_content { background-color: #a87f5c; opacity: 0.98; color: white; box-shadow: -1px -1px 5px 0 #a87f5c; } .menu .dropdown .dropdown_content a { text-decoration: none; color: white; font-size: 18px; text-align: left; display: block; transition: .6s all ease; margin-bottom: 5px; white-space: nowrap; letter-spacing: .03em; font-style: italic; } .menu .dropdown .dropdown_content a:hover { color: white; margin-left: 19px; } 
      <div class="menu"> <h3><a href="pages/main.html" class="selected">Главная</a></h3> <div class="dropdown"> <h3 href="pages/production.html" сlass="droplink">Продукция / портфолио</h3> <div class="dropdown_content"> <a href="pages/tables.html">Столы</a> <a href="pages/storage.html">Мебель для хранения</a> <a href="pages/interior.html">Интерьер</a> </div> </div> <h3><a href="pages/contacts.html">Контакты</a></h3> </div>

    • You solved the opacity task, but how to solve it through the display, because when you hover the cursor on the place where opacity: 0, a drop-down menu appears. And you need to make it appear only when you hover over a link, and not on the area where it is located. - ??? - Alex
    • Already decided himself. With display you can solve through @keyframes. - Alex