Adding a drop down transition to CSS Menu

this one helps. Use the css child selector to get the first one only:

/* NEW: This is the new style rule. */
#menu > ul > li > a:hover {
    border-bottom: 1px solid #FFF;
} 
#menu ul ul {
    position: absolute;
    top: 21px; /* <------ Had to add a pixel */
    visibility: hidden;
}

wish helps you Nowadays I am building a website and now I am making the menu-bar. Fortunately I have found a nice tutorial on the internet, and so far I have successfully implemented it. The tutorial and the source code can be found here: source code of the menubar And the result of this can be found here: Live Demo site Actually, I would like to add an transition effect to my dropdown menus. I would like to have the following effect: When I move the mouse to one of the menubar the drop-down menu will show up with a "fade-in" effect changing the opacity(If I am not mistaken, the fade-in effect is connected to change the opacity). And If I would move to another position with the mouse the drop-down goes back slowly, changing the opacity from 1 to 0. , We can animate dropdown with this:

$('#menu li').mouseenter(function () {
        $(this).find('[class^="dropdown"]').stop();
        $(this).find('[class^="dropdown"]').css({'overflow':'visible','max-height': '1000px'});
        console.log($(this).children('ul'));
    }).mouseleave(function () {
        $(this).find('[class^="dropdown"]').delay(400).queue(function (next) {
            /*********************************** 0.4s in css ***************/
            $(this).css({'overflow':'hidden','max-height': '0'});
            next();
        });
    });

wish helps you The transition effect will only affect the visibility property if that is the property that changes between the regular and hover state. Right now you are trying to animate visibility but you are showing/hiding the element with display: none. Instead of using display, change the visibility value.
This should work:

.nav ul {
  position: absolute;
  margin: 0;
  list-style: none;
  visibility: hidden;
}

.nav li:hover > ul {
  visibility: visible;
}

wish helps you This can be achieved with pure CSS if you want to trigger the transition with :hover, but here is an example of how to do it with a click,

document.querySelector(".menu p").onclick = function()
{
    var ul = document.querySelector('.menu_neviditelne').classList.toggle('active--list');
}

.menu_neviditelne {
  max-height: 0;
  overflow: hidden;
  transition: all 400ms ease-in-out;
}

.menu {
  cursor:pointer;
  user-select: none;
}

.active--list {
  max-height: 500px;
}

<div class="menu">
     <p>>>Zobrazit nabídku<<</p>
      <ul class="menu_neviditelne">
        <li><a href="index.html">Úvod</a></li>
        <li><a href="kavarna.html">Kavárna</a></li>
        <li><a href="nabidka.html">Nabídka</a></li>
        <li><a href="kava.html">O kávě</a></li>
        <li><a href="kariera.html">Kariéra</a></li>
      <li><a href="kontakt.html">Kontakt</a></li>
    </ul>
 </div>