CSS - Dropdowns on Hover

From NoskeWiki
Jump to navigation Jump to search
Dropdown list / popup window on hover


About

NOTE: This page is a daughter page of: CSS


Dropdown windows are useful for menu systems, but they can also show extra text information and even include enlarged pictures. There are some solutions that use JavaScript, but this is fun because it it pure CSS/HTML. This article expands on the great article at: www.w3schools.com/css/css_dropdowns.asp < you might want to play with this first. My example below is just a finished result and obviously not interactive.



Dropdown on Hover

Here's everything in a single HTML file. 

<!doctype html>
<html lang="en">
<head>
  <title>CSS Dropdowns on Hover</title>
  <style>
/* -- Drop down area -- */

.dropdown {  /* The container <div> - needed to position the dropdown content */
  position: relative;
  display: inline-block;
}
.dropdown:hover .dropbtn {
  background-color: #3e8e41;
}
.dropdown:hover .dropdown-content {
  display: block;  /* Show the dropdown menu on hover */
}

.dropdown-content {  /* Dropdown content (hidden by default) */
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  padding: 5px;
  min-width: 160px;
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {  /* Links inside the dropdown */
  color: black;
  padding: 2px 2px;
  text-decoration: none;
  display: block;
}
.dropdown-content a:hover {
  background-color: #f1f1f1;
}

.dropdown-button {  /* Dropdown button */
  border-radius: 5px;
  background: #e8e8e8;
  border: 1px solid #bababa;
  padding: 2px;
  height: 24px;
  font-size: 80%;
  color: #636363;
  cursor: pointer;
}

.dropdown-button-arrow {
  border-radius: 5px;
  background: #e8e8e8;
  border: 1px solid #bababa;
  padding: 2px;
  margin-left: -6px;
  height: 18px;
  width: 10px;
  font-size: 80%;
  color: #636363;
}
  </style>
</head>
<body>

  <div class="dropdown">
    <button class="dropdown-button">Dropdown</button>
    <div class="dropdown-content">
      <a href="#">link 1</a>
      <a href="#">link 2</a>
    </div>
  </div>

  <br><br>

  <div class="dropdown">
    <img src="http://placehold.it/200x100">
    <div class="dropdown-content">
      This image was taken by George Costanza.
      <img src="http://placehold.it/800x400">
    </div>
  </div>

</body>
</html>


Dropdown image window / popup window on hover


See Also

  • CSS - Instant Tooltip - If you just want text to drop down this solution might work out better for you, because it doesn't require extra HTML elements, just an extra "tooltip" HTML tag in your existing elements.


Links

  • [www.w3schools.com/css/css_dropdowns.asp CSS Dropdowns - w3schools.com example] - nice formatting too.
Retrieved from "http://andrewnoske.com/w/index.php?title=CSS_-_Dropdowns_on_Hover&oldid=3787"