CSS CSS Tutorial CSS Advanced CSS Responsive Web Design(RWD) CSS Grid CSS Properties Sass Tutorial Sass Functions



CSS Dropdowns

CSS Dropdowns are a popular feature in web design that allow users to access additional content or options by hovering or clicking on a menu item. They are commonly used in navigation menus, forms, and other interactive elements on websites.

Dropdown menus can be created using HTML and CSS, and there are several different ways to implement them. In this tutorial, we will explore some of the most common techniques for creating CSS dropdowns.

Basic CSS Dropdown

The most basic type of CSS dropdown is a simple hover menu. This type of menu is created using a nested list in HTML, and CSS is used to style the menu and add the hover effect.

Here is an example of a basic CSS dropdown:

  
    <ul class="menu">
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a>
        <ul>
          <li><a href="#">Our Team</a></li>
          <li><a href="#">Our Story</a></li>
        </ul>
      </li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  

In this example, the top-level menu items are contained in an unordered list with the class "menu". The second-level menu items are contained in nested unordered lists.

To style the menu, we can use CSS to set the width, background color, font size, and other properties. We can also use CSS to add the hover effect, which will display the second-level menu items when the user hovers over the top-level menu item.

  
    .menu {
      list-style: none;
      margin: 0;
      padding: 0;
      background-color: #f1f1f1;
      width: 200px;
      font-size: 16px;
    }

    .menu li {
      position: relative;
    }

    .menu li a {
      display: block;
      padding: 10px;
      color: #333;
      text-decoration: none;
    }

    .menu li:hover {
      background-color: #ccc;
    }

    .menu ul {
      position: absolute;
      top: 100%;
      left: 0;
      width: 100%;
      display: none;
    }

    .menu li:hover > ul {
      display: block;
    }

    .menu ul li {
      background-color: #fff;
      border-bottom: 1px solid #ccc;
    }

    .menu ul li a {
      display: block;
      padding: 10px;
      color: #333;
      text-decoration: none;
    }

    .menu ul li:hover {
      background-color: #f7f7f7;
    }
  

In this CSS code, we first set some basic styles for the menu, including the background color, width, and font size. We then set the list-style, margin, and padding to remove any default styles from the unordered list.

We also set the position of the list items to relative, which will allow us to position the second-level menu items absolutely within the parent list item.

The hover effect is created using the :hover pseudo-class. When the user hovers over a top-level menu item, the background color of the item changes to #ccc, and the second-level menu items are displayed using the display: block property.

The second-level menu items are positioned absolutely within the parent list item using the position: absolute property. We also set the top and left properties to position the menu items below the parent item.

Finally, we set some styles for the second-level menu items, including the background color, border, and padding.

Multilevel CSS Dropdown

In some cases, you may need to create a multilevel CSS dropdown menu with more than two levels of navigation. This can be achieved using a similar technique to the basic CSS dropdown, but with additional nested lists.

Here is an example of a multilevel CSS dropdown:

  
    <ul class="menu">
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a>
        <ul>
          <li><a href="#">Our Team</a></li>
          <li><a href="#">Our Story</a>
            <ul>
              <li><a href="#">History</a></li>
              <li><a href="#">Mission</a></li>
              <li><a href="#">Vision</a></li>
            </ul>
          </li>
        </ul>
      </li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  

In this example, we have added a third-level menu item under the "Our Story" menu item. This is achieved by adding another nested unordered list within the second-level list item.

To style the multilevel menu, we can use similar CSS to the basic dropdown, but with additional styles for the third-level menu items.

CSS Dropdown with Icons

In some cases, you may want to add icons to your CSS dropdown menu to make it more visually appealing or to provide additional context for the menu items.

Here is an example of a CSS dropdown with icons:

  
    <ul class="menu">
      <li><a href="#"><i class="fa fa-home"></i> Home</a></li>
      <li><a href="#"><i class="fa fa-info-circle"></i> About</a>
        <ul>
          <li><a href="#"><i class="fa fa-users"></i> Our Team</a></li>
          <li><a href="#"><i class="fa fa-book"></i> Our Story</a>
            <ul>
              <li><a href="#"><i class="fa fa-history"></i> History</a></li>
              <li><a href="#"><i class="fa fa-bullseye"></i> Mission</a></li>
              <li><a href="#"><i class="fa fa-eye"></i> Vision</a></li>
            </ul>
          </li>
        </ul>
      </li>
      <li><a href="#"><i class="fa fa-cog"></i> Services</a></li>
      <li><a href="#"><i class="fa fa-envelope"></i> Contact</a></li>
    </ul>
  

In this example, we have added Font Awesome icons to the menu items using the <i> tag. We can then use CSS to style the icons and position them within the menu items.

Here is an example of the CSS code for this menu:

  
    .menu li a i {
      margin-right: 10px;
    }
  

In this CSS code, we have added a margin-right of 10px to the icon to create some space between the icon and the text.

CSS Dropdown with Images

In some cases, you may want to use images instead of icons in your CSS dropdown menu. This can be achieved using a similar technique to the icon dropdown, but with the <img> tag instead of the <i> tag.

Here is an example of a CSS dropdown with images:

  
    <ul class="menu">
      <li><a href="#"><img src="home.png" alt="Home"> Home</a></li>
      <li><a href="#"><img src="about.png" alt="About"> About</a>
        <ul>
          <li><a href="#"><img src="team.png" alt="Our Team"> Our Team</a></li>
          <li><a href="#"><img src="story.png" alt="Our Story"> Our Story</a>
            <ul>
              <li><a href="#"><img src="history.png" alt="History"> History</a></li>
              <li><a href="#"><img src="mission.png" alt="Mission"> Mission</a></li>
              <li><a href="#"><img src="vision.png" alt="Vision"> Vision</a></li>
            </ul>
          </li>
        </ul>
      </li>
      <li><a href="#"><img src="services.png" alt="Services"> Services</a></li>
      <li><a href="#"><img src="contact.png" alt="Contact"> Contact</a></li>
    </ul>
  

In this example, we have used the <img> tag to add images to the menu items. We can then use CSS to style the images and position them within the menu items.

CSS Dropdown with Search

In some cases, you may want to add a search box to your CSS dropdown menu to allow users to search for specific content within the menu.

Here is an example of a CSS dropdown with a search box:

  
    <ul class="menu">
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a>
        <ul>
          <li><a href="#">Our Team</a></li>
          <li><a href="#">Our Story</a></li>
        </ul>
      </li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Contact</a></li>
      <li class="search">
        <form action="#" method="get">
          <input type="text" name="search" placeholder="Search">
          <button type="submit"><i class="fa fa-search"></i></button>
        </form>
      </li>
    </ul>
  

In this example, we have added a search box to the menu by creating a new list item with the class "search". We then add a form with an input field and a submit button to create the search box.

We can then use CSS to style the search box and position it within the menu.

Conclusion

CSS dropdowns are a powerful and versatile feature in web design that can be used to create interactive and engaging menus and forms. By using HTML and CSS, you can create dropdown menus with multiple levels of navigation, icons, images, and search boxes.

With a little creativity and some CSS skills, you can create dropdown menus that are both functional and visually appealing.

References

Activity