htmlcsscss-animationscss-transitions

How would I go about smoothly animating (in CSS only) the elements in a drop down list with a slide-down approach?

(I'm still pretty new to HTML and CSS so bare with me) I've been trying to customize this website to make it more pleasing to the eye. One of the things I'd like to do is customize the drop down menus under "Browse" and "Submit" so that when you hover over them, they extend downwards smoothly, such as a slide-down effect. I want to animate both the dropdown menu itself and the text inside it together.

The segment of HTML I'm looking at is this:

.dropdown-toggle {
  min-height: fit-content;
  min-width: fit-content;
  max-height: fit-content;
  max-width: fit-content;
}

.dropdown-menu {
  block-size: fit-content;
  width: 100px;
  height: 200px;
  transition: height 1s;
  overflow: hidden;
}

.dropdown-menu:hover {
  height: 300px;
  block-size: fit-content;
  overflow: hidden;
}

.nav-item dropdown {
  width: 100px;
  height: 100px;
  transition: height 2s;
  block-size: fit-content;
  overflow: hidden;
}

.nav-item dropdown:hover {
  height: 300px;
  block-size: fit-content;
  overflow: hidden;
}

.nav-link dropdown-toggle {
  width: 100px;
  height: 100px;
  transition: height 1s;
  overflow: hidden;
}

.nav-link dropdown-toggle:hover {
  height: 300px;
}


.dropdown-item {
  width: 30px;
  height: 30px;
  transition: height 1s;
  position: sticky;
}

.dropdown-item:hover {
  height: 50px;
}

.dropdown-menu show {
  min-height: 0px;
  min-width: 0px;
  max-height: 300px;
  max-width: 300px;
}

.dropdown-menu show:hover {
  height: 50px;
}
<!-- Left Nav Section -->
<ul class="navbar-nav mr-auto navbar-left">
  <li class="nav-item">
    <a class="nav-link" href="https://toyhou.se/DeclineOfMySanity">
      <span class="fa fa-home"></span> Profile 
    </a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="https://toyhou.se/~forums">
     <span class="fa fa-comments"></span> Forums 
    </a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" data-target="#dropdownBrowse" >
      <span class="fa fa-fw fa-search"></span> 
      Browse 
    </a>
    <div class="dropdown-menu" id="dropdownBrowse">
      <h6 class="dropdown-header">Characters</h6>
      <a class="dropdown-item" href="https://toyhou.se/~browse/popular"><i class="fa fa-fire fa-fw mr-1"></i> Popular </a>
      <a class="dropdown-item" href="https://toyhou.se/~browse/feed"><i class="fa fa-binoculars fa-fw mr-1"></i> Feed </a>
      <a class="dropdown-item" href="https://toyhou.se/~browse/recent"><i class="fa fa-fw fa-clock mr-1"></i> Recent </a>
      <a class="dropdown-item" href="https://toyhou.se/~browse/search"><i class="fa fa-fw fa-search mr-1"></i> Search </a>
      <h6 class="dropdown-header">Browse</h6>
      <a class="dropdown-item" href="https://toyhou.se/~library/popular"><i class="fa fa-fw fa-book mr-1"></i> Literatures </a>
      <a class="dropdown-item" href="https://toyhou.se/~worlds"><i class="fa fa-fw fa-globe mr-1"></i> Worlds </a>
    </div>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" data-target="#dropdownCreate" > <span class="fa fa-fw fa-plus"></span> Submit </a>
    <div class="dropdown-menu" id="dropdownCreate">
      <a class="dropdown-item" href="https://toyhou.se/~characters/create"><i class="fa fa-fw fa-user mr-1"></i> Character </a>
      <a class="dropdown-item" href="https://toyhou.se/~bulletins/create"><i class="fa fa-fw fa-newspaper mr-1"></i> Bulletin </a>
      <a class="dropdown-item" href="https://toyhou.se/~images/upload"><i class="fa fa-fw fa-image mr-1"></i> Image </a>
      <a class="dropdown-item" href="https://toyhou.se/~images/multi-upload"><i class="fa fa-fw fa-image mr-1"></i> Multi-Images </a>
      <a class="dropdown-item" href="https://toyhou.se/~literatures/create"><i class="fa fa-fw fa-book mr-1"></i> Literature </a>
      <a class="dropdown-item" href="https://toyhou.se/~worlds/create"><i class="fa fa-fw fa-globe mr-1"></i> World </a>
    </div>
  </li>
</ul>

I've tried a couple things already on my own, and have applied this to my CSS so far:

Honestly these are just a bunch of attempts at making it move in the first place. Problems I see include the dropdown ONLY extending when hovering over the box itself and not the "Submit" button, the block behind the text showing immediately on hover instead of sliding out from nothing, and not being able to make the block behind the text extend on its own; it pops out no matter what I do.

I'm honestly just really confused so any help whatsoever would be greatly appreciated!

Solution

  • Ensure the dropdown menu is hidden by default

    .navbar-nav .dropdown-menu {
  display: block;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, transform 0.3s ease;
  transform: translateY(-10px); /* Start slightly above */
}

    Show the dropdown menu on hover

    .navbar-nav .nav-item.dropdown:hover .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0); /* Slide down to its original position */
}

    Add a slight delay to the animation for a smoother effect

    .navbar-nav .dropdown-menu {
  transition-delay: 0.1s;
}

    Ensure the dropdown menu stays visible when hovering over it

    .navbar-nav .dropdown-menu:hover {
  opacity: 1;
  visibility: visible;
}


    /* Ensure the dropdown menu is hidden by default */
.navbar-nav .dropdown-menu {
  display: block;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, transform 0.3s ease;
  transform: translateY(-10px);
  /* Start slightly above */
}

/* Show the dropdown menu on hover */
.navbar-nav .nav-item.dropdown:hover .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  /* Slide down to its original position */
}

/* Optional: Add a slight delay to the animation for a smoother effect */
.navbar-nav .dropdown-menu {
  transition-delay: 0.1s;
}

/* Ensure the dropdown menu stays visible when hovering over it */
.navbar-nav .dropdown-menu:hover {
  opacity: 1;
  visibility: visible;
}
    <!-- Left Nav Section -->
<ul class="navbar-nav mr-auto navbar-left">
  <li class="nav-item">
    <a class="nav-link" href="https://toyhou.se/DeclineOfMySanity">
        <span class="fa fa-home"></span> Profile
      </a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="https://toyhou.se/~forums">
       <span class="fa fa-comments"></span> Forums
      </a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" data-target="#dropdownBrowse" >
        <span class="fa fa-fw fa-search"></span>
        Browse
      </a>
    <div class="dropdown-menu" id="dropdownBrowse">
      <h6 class="dropdown-header">Characters</h6>
      <a class="dropdown-item" href="https://toyhou.se/~browse/popular"><i class="fa fa-fire fa-fw mr-1"></i> Popular </a>
      <a class="dropdown-item" href="https://toyhou.se/~browse/feed"><i class="fa fa-binoculars fa-fw mr-1"></i> Feed </a>
      <a class="dropdown-item" href="https://toyhou.se/~browse/recent"><i class="fa fa-fw fa-clock mr-1"></i> Recent </a>
      <a class="dropdown-item" href="https://toyhou.se/~browse/search"><i class="fa fa-fw fa-search mr-1"></i> Search </a>
      <h6 class="dropdown-header">Browse</h6>
      <a class="dropdown-item" href="https://toyhou.se/~library/popular"><i class="fa fa-fw fa-book mr-1"></i> Literatures </a>
      <a class="dropdown-item" href="https://toyhou.se/~worlds"><i class="fa fa-fw fa-globe mr-1"></i> Worlds </a>
    </div>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" data-target="#dropdownCreate" > <span class="fa fa-fw fa-plus"></span> Submit </a>
    <div class="dropdown-menu" id="dropdownCreate">
      <a class="dropdown-item" href="https://toyhou.se/~characters/create"><i class="fa fa-fw fa-user mr-1"></i> Character </a>
      <a class="dropdown-item" href="https://toyhou.se/~bulletins/create"><i class="fa fa-fw fa-newspaper mr-1"></i> Bulletin </a>
      <a class="dropdown-item" href="https://toyhou.se/~images/upload"><i class="fa fa-fw fa-image mr-1"></i> Image </a>
      <a class="dropdown-item" href="https://toyhou.se/~images/multi-upload"><i class="fa fa-fw fa-image mr-1"></i> Multi-Images </a>
      <a class="dropdown-item" href="https://toyhou.se/~literatures/create"><i class="fa fa-fw fa-book mr-1"></i> Literature </a>
      <a class="dropdown-item" href="https://toyhou.se/~worlds/create"><i class="fa fa-fw fa-globe mr-1"></i> World </a>
    </div>
  </li>
</ul>

    I hope this will help you