Drop-down menus in HTML and CSS

by danielkwood

HTML

<html>
<head>
  <title>Drop-down menu</title>
  <link rel="stylesheet" href="theme.css" type="text/css"/>
</head>
<body>

<h2>Dropdown menu example</h2>
<p>This is an example of a drop-down menu. Hover your mouse cursor over the button to reveal the dropdown menu. You can add more buttons and drop-down menus by modifying the HTML and CSS code. Replace the link text and the # hashtags with the actual links.</p>

<div class="dropdown_div">
  <button class="dropdown_button">Dropdown button</button>
  <div class="dropdown_content">
    <div class="dropdown-left">
      <a href="link.html">Link 1</a>
      <a href="link.html">Link 2</a>
    </div>
    <div class="dropdown-right">
      <a href="link.html">Link 3</a>
    </div>
  </div>
</div>


<div class="dropdown_div">
  <button class="dropdown_button">Dropdown button 2</button>
  <div class="dropdown_content">
    <a href="link.html">Link 1</a>
    <a href="link.html">Link 2</a>
    <a href="link.html">Link 3</a>
  </div>
</div>

  <!-- Just duplicate the dropdown_div block to add more drop-down buttons -->

</body>
</html>

CSS

.dropdown_div {
    position: relative;
    display: inline-block;
}

.dropdown_button {
    background-color: #5961D4; /* button background colour */
    color: #ffffff;
    padding: 14px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

.dropdown_content {
    display: none; /* remove this to show all links before hovering */
    position: absolute;
    background-color: #f9f9f9; /* dropdown items - background colour */
    width: 200%; /* can remove this if you want to make the menu wider/narrower  */
    /* min-width: 180px; can add this if you need to change the minimu width of menu */
    box-shadow: 0px 6px 14px 0px rgba(0,0,0,0.3);
}

.dropdown-left{
   width: 40%;
   float: left;
}

.dropdown-right{
   width: 40%;
   float: left;
}

.dropdown_content a {
    font-family: "Arial";
    color: #000000;
    padding: 12px 18px;
    text-decoration: none;
    display: block;
}

.dropdown_content a:hover {
    background-color: #9594A1; /* dropdown items hover - change background colour */
}

.dropdown_div:hover .dropdown_content {
    display: block;
}

.dropdown_div:hover .dropdown_button {
    background-color: #492FA1; /* button hover - change background colour */
}

p{
    font-family: "Arial";
}

h2{
    font-family: "Arial";
}