Others


Others


Create Simple Dropdown Menu using CSS


We have to Use button element to open the dropdown content,when mouse hover the button then dropdown menu will be displayed.

Example : dropdown.html 
<html>
  <head>
    <title>Simple Dropdown Menu</title>
    <style>
      .dropdown{
        display: inline-block;
        width:auto;
        position:relative;
      }
      .dropdown .btn{
        padding:5px 10px;
        border:none;
        border:1px solid #4271df;
        background:#4271df;
        color:white;
        font-weight:800;
        border-radius:5px;
      }
      .dropdown .btn:hover{
        background:#2b60db;
      }
      .dropdown ul{
        margin:0;
        width:100%;
        list-style:none;
        padding:12px 20px;
        box-shadow:2px 2px 3px 2px #ccc;
        border-radius:2px;
        display:none;
        position:absolute;
      }
      .dropdown ul li{
        padding:5px 0;
      }
      .dropdown ul li a{
        text-decoration:none;
        font-weight:600;
        color:#000;
      }
      .dropdown:hover ul{
        display:block;
      }
    </style>
  </head>
  <body>
    <div class='dropdown'>
      <input type='button' class='btn' value='Dropdown 1'>
      <ul>
        <li><a href='#'>Menu 1</a></li>
        <li><a href='#'>Menu 2</a></li>
        <li><a href='#'>Menu 3</a></li>
        <li><a href='#'>Menu 4</a></li>
      </ul>
    </div>
    
    <div class='dropdown'>
      <input type='button' class='btn' value='Dropdown 2'>
      <ul>
        <li><a href='#'>Menu 5</a></li>
        <li><a href='#'>Menu 6</a></li>
        <li><a href='#'>Menu 7</a></li>
        <li><a href='#'>Menu 8</a></li>
      </ul>
    </div>
  </body>
</html>
Try it Yourself

Live Demo