JavaScript | Super Simple CSS Dropdown Menu (HTML, CSS) ...

<!DOCTYPE html>
<html lang="en" >

<title>CodePen - Super Simple CSS Dropdown Menu</title>

h1 {
  color: rgb(174, 226, 196);
  padding-right: 30px;
}
#kitty-drop {
  text-align:left;
  display:inline;
  margin:0;
  padding:15px;
  list-style:none;
}

#kitty-drop li{
  display:inline-block;
  margin-right: -4px;
  position: relative;
  padding: 15px 20px;
  color: rgb(174, 226, 196);
  background: transparent;
  cursor: pointer;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -ms-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
}

#kitty-drop li:hover {
  background: transparent;
  color: #fff;
}

#kitty-drop li ul {
  padding: 0;
  position: absolute;
  top: 48px;
  left: 0;
  width: 150px;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  display: none;
  opacity: 0;
  visibility: hidden;
  -webkit-transiton: opacity 0.2s;
  -moz-transition: opacity 0.2s;
  -ms-transition: opacity 0.2s;
  -o-transition: opacity 0.2s;
  -transition: opacity 0.2s;
}

#kitty-drop li ul li { 
  background: #333; 
  display: block; 
  color: #fff;
  text-shadow: 0 -1px 0 #000;
}

#kitty-drop li ul li:hover { 
  background: #555; 
}

#kitty-drop li:hover ul {
  display: block;
  opacity: 1;
  visibility: visible;
}

a {
  color: inherit;
  text-decoration:none;
}

/*DONATE BTN*/
:root {
  --border-width: 0.1875em;
}

.button {
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 1.25rem;
  line-height: 1;
  -moz-appearance: none;
  -webkit-appearance: none;
  vertical-align: middle;
  display: inline-block;
  color: #fff;
  text-transform: uppercase;
  font-weight: 900;
  font-style: italic;
  margin: 0 auto;
  padding: 0.75em 1.5em; 
  /*button colors below*/
  background: linear-gradient(rgba(133, 155, 108, 0.8), rgba(72, 84, 59,0.5)), linear-gradient(-60deg, rgba(104, 201, 164,1), rgba(152, 226, 174,1));
  background-clip: padding-box, border-box;
  background-size: 100% 100%, calc(100% + var(--border-width) + var(--border-width)) calc(100% + var(--border-width) + var(--border-width));
  background-position: 0 0, calc(var(--border-width) * -1) calc(var(--border-width) * -1);
  border-radius: 2em;
  border: var(--border-width) solid transparent;
  /*button drop-shadow colors below*/
  box-shadow: 0 0.125em 0.25em rgb(173, 219, 164), 0 0 2em rgb(72, 84, 59);
  cursor: pointer;
  transition: box-shadow 0.3s ease-out, transform 0.3s ease-out;
}
 /*button drop-shadow colors below on hover*/
.button:hover {
  box-shadow: 0 0.25em 0.75em rgb(173, 219, 164), 0 0.125em 2em rgba(72, 84, 59,0.7);
  transform: translateY(-0.125em);
}
</style>

</head>

<body translate="no">
  <h1>Cat Rescue</h1>
<button class="button">Donate Now</button>
<ul id="kitty-drop">
  <li><a href="#">Home</a></li>
  <li>Blog
    <ul>
      <li>Events</li>
      <li>Donate</li>
      <li>Volunteer</li>    
    </ul>
  </li>
  <li>Social Links
    <ul>
      <li>Twitter</li>
      <li>Facebook</li>
      <li>LinkedIn</li>
      <li>CodePen</li>
    </ul>
  </li>
  <li>Contact</li>
  <li>Have some fun
  <ul>
    <li>Go On</li>
    </ul>
  </li>
</ul>
  
  
  
</body>

</html>

Comments 0

Note: