<!DOCTYPE html>
<html>
<head>
<style>
/*
Just place the dropdown-menu class on a container (probably a div or a li element) and additionally
place either dropdown-click or dropdown-hover on the container. Then inside add a button with the text
to display, and create a ul with a list containing the items you want in your dropdown menu.

Note that it's important that the first element inside the dropdown-menu container is an html button. This
allows you to make use of the focus selector.
*/

/* Dropdown styles */
.dropdown-menu {
  position:relative;
  border: 1px solid rgba(0, 0, 0, 0.1);
}
.dropdown-menu a, .dropdown-menu a:hover, .dropdown-menu:hover .dropdown-menu ul a {
  text-decoration:none;
}
.dropdown-menu button {
  border: 0;
  background: transparent;
  cursor: pointer;
  font: inherit;
  color: inherit;
}
.dropdown-menu ul{
  display: block;
  margin: 0;
  padding: 0;
  width:100%;
  list-style:none;
  position:absolute;
  padding-top:20px;
  display:none;
}
.dropdown-menu.dropdown-click button:focus + ul, .dropdown-menu.dropdown-click ul:hover, .dropdown-menu.dropdown-hover:hover ul {
  top:0px;
  display:block;
}
.dropdown-menu a:hover {
  text-decoration:underline;
}

/* General styles */
body {
  background-color:white;
  color: black;
  font-family: "Times New Roman", Georgia, Serif;
}
.navbar > li {
  background-color:#ccf;
  color:black;
  display: inline-block;
}
</style>
</head>
<body>
<ul class='navbar'>
  <li class='dropdown-menu dropdown-click'>
    <button>Click me</button>
    <ul>
      <li><a title="1" href="#">Link 1</a></li>
      <li><a title="2" href="#">Link 2</a></li>
      <li><a title="3" href="#">Link 3</a></li>
      <li><a title="4" href="#">Link 4</a></li>
    </ul>
  </li>
  <li class='dropdown-menu dropdown-hover'>
    <button>Hover me</button>
    <ul>
      <li><a title="1" href="#">Link 1</a></li>
      <li><a title="2" href="#">Link 2</a></li>
      <li><a title="3" href="#">Link 3</a></li>
      <li><a title="4" href="#">Link 4</a></li>
    </ul>
  </li>
</ul>
</body>
</html>