CSS Dropdowns

    In this CSS tutorial, we will be going learn how can we care dropdown menu using CSS styling. In this tutorial, we have provided two source codes to show how can we use the CSS and create a dropdown menu for our webpage.

    A Basic Hover Dropdown Menu

    In a hover dropdown menu when the user hover the cursor over the menu element a list of sub-items drop-down. And to create such effect we have to use various CSS properties along with the Pseudo-Class :hove r. Example

    <!DOCTYPE html>
    <html>
        <head>
            <style>
              .dropdown-menu {
                  position: relative;
                  display: inline-block;
                      }
            .menu-content {
                  display: none;
                  position: absolute;
                  background-color: yellow;
                  box-shadow: 0px 8px 16px 0px red;
                         }
           .dropdown-menu:hover .menu-content {
                  display: block;
                         }
           </style>
        </head>
        <body>
            <div class="dropdown-menu">   
                 <span>Hover Over Me</span>
                 <div class="menu-content">
                        <p>Welcome to TechGeekBuzz!</p>
                        <p>This Tutorial is about Dropdown Menu</p>
                 </div>
            </div>
    </body>
    </html>

    Behind the Code

    HTML Code

    In the above example, we have created a <div> element with a class name “dropdown-menu” which contain all the text content. We have used the <span> element for the and :hover pseudo-class to open the dropdown menu, you can also replace the <span> element with a <button> . We have also created a separate <div> element for the menu content, and the class name of that div is “menu-content” . You can put more content inside that <div> element. But Always make sure that the menu content <div> element always be a child of dropdown div.

    CSS Code

    For the . dropdown-menu element we have set the position:relative this is important because it make sure that the content of the dropdown menu will be displayed at the right place. The .menu-content contain the actual content for the drop down menu, so we only want to see that content when the user hovers over the <span> element that’s why we have set its display:none with position:absolute . The box-shadow property makes the menu content look like a card, you can also use the border property instead of box-shadow . The pseudo-element :hover select the menu-content and set the display:block when the user hover the mouse over the .dropdown-menu or <span> element content.

    Dropdown Links

    Dropdown menu are generally used to show a list of links. This example below create a dropdown menu which contains a list of links. Example

    <!DOCTYPE html>
    <html>
        <head>
              <style>
                  .btn {
                      color: white;
                      background-color: blue;
                        }
                  .dropdown-menu {
                      position: relative;
                      display: inline-block;
                        }
                  .menu-content {
                     display: none;
                     position: absolute;
                     box-shadow: 0px 8px 16px 0px;
                         }
                  
                  .menu-content a {
                     color: red;
                     padding: 10px 15px;
                     display: block;
                         }
                  .dropdown-menu:hover .menu-content {
                      display: block;
                        }
            </style>
        </head>
        <body>
            <div class="dropdown-menu">
               <button class="btn">Hover Over Me</button>
                   <div class="menu-content">
                       <a href="#">Link 1</a>
                        <a href="#">Link 2</a>
                       <a href="#">Link 3</a>
                   </div>
           </div>
        </body>
    </html>

    Dropdown Summary

    To create a dropdown menu we need to wrap the menu-content div inside the main dropdown-menu <div> element. The only main trick is to keep the menu-content display none and dropdown-menu :hover display to block . People are also reading: