How to add a delay to dropdown menus in CSS?-CodePudding

I want to add an 'animated' look to my dropdown menu so that it doesn't immediately appear while hovering. Not sure how to go about it. Any help is greatly appreciated :)

Example: Demo

Here is my code currently: CodePen

nav{
  width: 100%;
  height: 70px;
  background-color: white;
}

nav ul {
  float: left;
}

nav ul li{
  float: left;
  list-style: none;
  position: relative;
}

nav ul li a{
  display: block;
  font-family: 'Forum';
  color: black;
  font-size: 40px;
  text-decoration: none;
}

nav ul li ul{
  display: none;
  position: absolute;
  padding: 0px;
  background-color: rgb(255, 255, 255);
  padding: 5px 10px; /* spacing between hovering overlay and full outline */
  border-radius: 0px 0px 10px 10px;
}

nav ul li:hover ul{
  display: block;
}

nav ul li ul li{
  width: 180px;
  border-radius: 4px;
}

nav ul li ul li a{
  padding: 8px 0px;
}

nav ul li ul li a:hover {
  background-color: rgba(135, 206, 250, 0.5);
  padding: 8px 4px;
  border-radius: 7px;
}

<html onclick="play()" lang="en">
  <head>
    <meta charset="UTF-8">
  </head>
  <body>
  <nav>
    <ul>
      <li><a href="#">Socials ⤵</a>
        <ul>
          <li><a href="https://www.instagram.com/chassis.gh/">Instagram</a></li>
          <li><a href="https://discordapp.com/users/259405254335004685">Discord</a></li>
          <li><a href="https://t.me/chassis_gh">Telegram</a></li>
          <li><a href="https://github.com/chassisGH">GitHub</a></li>
        </ul>
      </li>
    </ul>
  </nav>
  </body>
</html>

(PS) sorry if this post is low-quality or breaks any rules, it's my first.

CodePudding user response：

Basically, I just copied from the source website

nav {
  width: 100%;
  height: 70px;
  background-color: white;
}

nav ul {
  float: left;
}

nav ul li {
  float: left;
  list-style: none;
  position: relative;
}

nav ul li a {
  display: block;
  font-family: 'Forum';
  color: black;
  font-size: 40px;
  text-decoration: none;
}

nav ul li ul {
  /* display: none; */
  position: absolute;
  padding: 0px;
  background-color: rgb(255, 255, 255);
  padding: 5px 10px;
  /* spacing between hovering overlay and full outline */
  border-radius: 0px 0px 10px 10px;
}

nav ul li:hover ul {
  display: block;
}

nav ul li ul li {
  width: 180px;
  border-radius: 4px;
}

nav ul li ul li a {
  padding: 8px 0px;
}


nav ul li ul li a:hover {
  background-color: rgba(135, 206, 250, 0.5);
  padding: 8px 4px;
  border-radius: 7px;
}



/* copied from source in codepen */

.menu-item .sub-menu {
  position: absolute;
  top: 100%;
  width: 100%;
  transform-origin: top;
  transform: rotateX(-90deg);
  transition: transform 0.3s linear;
  background-color: #f4d03f;
}

.menu-item:hover .sub-menu {
  transform: rotateX(0deg);
}

<html onclick="play()" lang="en">

<head>
  <meta charset="UTF-8">
</head>

<body>
  <nav>
    <ul>
      <li ><a href="#">Socials ⤵</a>
        <ul >
          <li><a href=" https://www.instagram.com/chassis.gh/ ">Instagram</a></li>
          <li><a href="https://discordapp.com/users/259405254335004685 ">Discord</a></li>
          <li><a href="https://t.me/chassis_gh ">Telegram</a></li>
          <li><a href="https://github.com/chassisGH ">GitHub</a></li>
        </ul>
      </li>
    </ul>
  </nav>
  </body>
</html>

CodePudding user response：

Okay first of all you cannot make transition to something that is display none..you have 2 options: 1.visibility. 2.Opacity I also Used Transform translate to move it up in the first place the moving it back when hover. and transition of all in 0.5s ease

@import url('css.css');
@import url(https://fonts.googleapis.com/css?family=Forum);
/*---------------------------------------/*
/* nav bar */
nav{
  width: 100%;
  height: 70px;
  background-color: white;
}

/* 'socials' */
nav ul {
  float: left;
}

/* dif socials */
nav ul li{
  float: left;
  list-style: none;
  position: relative;   /* hides until hovering */
}
/* styling for text in navigation */
nav ul li a{
  display: block;
  font-family: 'Forum';
  color: black;
  font-size: 40px;
  text-decoration: none;
}

/* styling for dropdown */
nav ul li ul{
  z-index:-99;
  visibility:hidden;
  position: absolute;
  padding: 0px;
  background-color: rgb(255, 255, 255);
  padding: 5px 10px; /* spacing between hovering overlay and full outline */
  border-radius: 0px 0px 10px 10px;
  transform:translateY(-20%);
  transition:all 0.5s ease;
}

/* hover effect */
nav ul li:hover ul{
  visibility:visible;
  transform:translateY(0%);
}

/* dropdown items */
nav ul li ul li{
  width: 180px;
  border-radius: 4px;
}
/* padding for dropdown items */
nav ul li ul li a{
  padding: 8px 0px;
}

/* overlay while hovering over items */
nav ul li ul li a:hover {
  background-color: rgba(135, 206, 250, 0.5);
  padding: 8px 4px;
  border-radius: 7px;
}

<!DOCTYPE html>
<html onclick="play()" lang="en">
  <head>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Forum&display=swap" rel="stylesheet">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body>
  <nav>
    <ul>
      <li><a href="#">Socials ⤵</a>
        <ul>
          <li><a href="https://www.instagram.com/chassis.gh/">Instagram</a></li>
          <li><a href="https://discordapp.com/users/259405254335004685">Discord</a></li>
          <li><a href="https://t.me/chassis_gh">Telegram</a></li>
          <li><a href="https://github.com/chassisGH">GitHub</a></li>
        </ul>
      </li>
    </ul>
  </nav>
  </body>
</html>