Css Dropdown

In this example below you will see how to do a Css Dropdown with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by TheFlash087, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright TheFlash087 ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Css Dropdown</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <html>
  <body>
    <div class="nav-container">
      <ul class="nav-items">
        <!-- Navigation -->
        <li class="nav-item"><a href="#">Home</a></li>
        <li class="nav-item"><a href="#">About</a></li>
        <li class="nav-item"><a href="#">Contact</a></li>
        <!-- Dropdown menu -->
        <li class="nav-item nav-item-dropdown">
          <a class="dropdown-trigger" href="#">Settings</a>
          <ul class="dropdown-menu">
            <li class="dropdown-menu-item">
              <a href="#">Dropdown Item 1</a>
            </li>
            <li class="dropdown-menu-item">
              <a href="#">Dropdown Item 2</a>
            </li>
            <li class="dropdown-menu-item">
              <a href="#">Dropdown Item 3</a>
            </li>
          </ul>
        </li>
        <li class="nav-item nav-item-dropdown">
          <a class="dropdown-trigger" href="#">What</a>
          <ul class="dropdown-menu">
            <li class="dropdown-menu-item">
              <a href="#">Dropdown Item 1</a>
            </li>
            <li class="dropdown-menu-item">
              <a href="#">Dropdown Item 2</a>
            </li>
            <li class="dropdown-menu-item">
              <a href="#">Dropdown Item 3</a>
            </li>
          </ul>
        </li>
      </ul>
    </div>
    hi this is a very long sentence which is pointless and i just want to see what would happen if things went crazy and hope it works well
  </body>
</html>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/TheFlash087/css-dropdown-aBbBvy */
@charset "UTF-8";
.nav-container {
  padding: 1em;
  display: block;
  margin: 0 auto;
  text-align: center;
}

.nav-container ul,
.nav-container li {
  list-style: none;
  -webkit-padding-start: 0;
}

.nav-container a {
  text-decoration: none;
  color: black;
}

.nav-items > li > a {
  padding: 10px;
}

.nav-items > li > a:hover {
  background-color: #cdcdcd;
}

.nav-item {
  padding: 1em;
  display: inline;
}

.nav-item-dropdown {
  position: relative;
}

.nav-item-dropdown:hover > .dropdown-menu {
  display: block;
  opacity: 1;
}

.dropdown-trigger {
  position: relative;
}

.dropdown-trigger:focus + .dropdown-menu {
  display: block;
  opacity: 1;
}

.dropdown-trigger::after {
  content: "›";
  position: absolute;
  color: black;
  font-size: 24px;
  font-weight: bold;
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
  bottom: -10px;
  right: 25%;
}

.dropdown-menu {
  background-color: #555;
  display: inline-block;
  text-align: right;
  position: absolute;
  top: 2.5rem;
  right: -10px;
  display: none;
  opacity: 0;
  -webkit-transition: opacity 0.5s ease;
  transition: opacity 0.5s ease;
  width: 160px;
}

.dropdown-menu a {
  color: #fff;
}

.dropdown-menu-item {
  cursor: pointer;
  padding: 1em;
  text-align: center;
}

.dropdown-menu-item:hover {
  background-color: #4b545f;
}

Comments