Home >Web Front-end >CSS Tutorial >How to Create Multi-Level Dropdown Menus Using Only CSS?

How to Create Multi-Level Dropdown Menus Using Only CSS?

Barbara Streisand
Barbara StreisandOriginal
2024-12-09 06:03:15399browse

How to Create Multi-Level Dropdown Menus Using Only CSS?

Creating Multi-Level Drop-Down Menus with Pure CSS

Achieving multi-level drop-down menus using pure CSS has evolved since the early solutions you've mentioned. Here's a modern approach that offers a sleek and maintainable implementation:

This method utilizes a combination of nested unordered lists (

    s) and absolute positioning to create the multi-level structure. Each level of the menu is represented by a separate
      element, and their positions are controlled dynamically based on their parent elements.

      The following code snippet provides the CSS styles for the menu:

      .third-level-menu {
          position: absolute;
          top: 0;
          right: -150px;
          width: 150px;
          list-style: none;
          padding: 0;
          margin: 0;
          display: none;
      }
      
      .third-level-menu > li {
          height: 30px;
          background: #999999;
      }
      .third-level-menu > li:hover { background: #CCCCCC; }
      
      .second-level-menu {
          position: absolute;
          top: 30px;
          left: 0;
          width: 150px;
          list-style: none;
          padding: 0;
          margin: 0;
          display: none;
      }
      
      .second-level-menu > li {
          position: relative;
          height: 30px;
          background: #999999;
      }
      .second-level-menu > li:hover { background: #CCCCCC; }
      
      .top-level-menu {
          list-style: none;
          padding: 0;
          margin: 0;
      }
      
      .top-level-menu > li {
          position: relative;
          float: left;
          height: 30px;
          width: 150px;
          background: #999999;
      }
      .top-level-menu > li:hover { background: #CCCCCC; }
      
      .top-level-menu li:hover > ul {
          /* On hover, display the next level's menu */
          display: inline;
      }
      
      .top-level-menu a /* Apply to all links inside the multi-level menu */ {
          font: bold 14px Arial, Helvetica, sans-serif;
          color: #FFFFFF;
          text-decoration: none;
          padding: 0 0 0 10px;
      
          /* Make the link cover the entire list item-container */
          display: block;
          line-height: 30px;
      }
      .top-level-menu a:hover { color: #000000; }

      The HTML structure for the menu is as follows:

      <ul class="top-level-menu">
          <li><a href="#">About</a></li>
          <li><a href="#">Services</a></li>
          <li>
              <a href="#">Offices</a>
              <ul class="second-level-menu">
                  <li><a href="#">Chicago</a></li>
                  <li><a href="#">Los Angeles</a></li>
                  <li>
                      <a href="#">New York</a>
                      <ul class="third-level-menu">
                          <li><a href="#">Information</a></li>
                          <li><a href="#">Book a Meeting</a></li>
                          <li><a href="#">Testimonials</a></li>
                          <li><a href="#">Jobs</a></li>
                      </ul>
                  </li>
                  <li><a href="#">Seattle</a></li>
              </ul>
          </li>
          <li><a href="#">Contact</a></li>
      </ul>

      This approach ensures that the menu remains responsive and adapts to various screen sizes and device orientations. It also eliminates the need for JavaScript, making it compatible with all browsers.

      The above is the detailed content of How to Create Multi-Level Dropdown Menus Using Only CSS?. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn