An example explains how to implement a secondary menu using pure CSS

As websites become more and more complex, navigation bars become more and more important. The secondary menu is a common navigation bar design that can provide users with more choices and increase the usability and adaptability of the website. Therefore, in the process of building a website, it is essential to implement a simple and easy-to-use secondary menu. In this article, we will learn how to implement a secondary menu using CSS.

1. HTML structure design

First of all, we need to set up the structure of the navigation bar in HTML, which is very important for the implementation of CSS.

The HTML structure of a simple navigation bar is as follows:

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li>
      <a href="#">Services &#x25BC;</a>
      <ul>
        <li><a href="#">Web Design</a></li>
        <li><a href="#">Web Development</a></li>
        <li><a href="#">SEO</a></li>
      </ul>
    </li>
    <li><a href="#">About Us</a></li>
    <li><a href="#">Contact Us</a></li>
  </ul>
</nav>

This structure contains a nav element and a ul element. The nav element wraps the complete navigation bar, while the ul element contains each individual link of the navigation bar, as well as the link containing the secondary menu.

Notice that the second li element contains a ul element, which is the container of the secondary menu. We will add styles to this container in the next steps.

2. CSS style design

Next, we need to set the CSS style for this navigation bar to implement the secondary menu. In the following code, we will first remove the default style and set the following style for all links:

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav li {
  position: relative;
}

nav a {
  display: block;
  padding: 0.5em;
  color: #000;
  text-decoration: none;
  font-size: 1.2em;
}

nav ul ul {
  position: absolute;
  top: 100%;
  left: 0;
  opacity: 0;
  visibility: hidden;
  background-color: #fff;
}

nav ul ul li {
  float: none;
  width: 100%;
}

nav li:hover > ul {
  opacity: 1;
  visibility: visible;
}

nav ul ul li:hover > ul {
  opacity: 1;
  visibility: visible;
}

nav ul ul ul {
  top: 0;
  left: 100%;
}

This block of code contains the following parts:

• We will first remove The default style is set and the basic style of all links is set.
• Next, we set position: relative; for all li elements so that they are positioned relative to its child elements. This means we can position it via child elements.
• Each secondary menu is contained by a separate ul element. We set some basic styles for these ul elements, such as positioning and invisible.
• Finally, we added the mouse hover effect. When the mouse hovers over an li element, we will change the visibility of its child elements to visible. When the mouse is hovering over the secondary menu, we change the visibility of itself and its child elements to visible. That is, whenever the mouse is hovering over the navigation bar, all secondary menus will be presented in the displayed state.

3. Full Code Example

Finally, our complete HTML and CSS code will look like this:

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li>
      <a href="#">Services &#x25BC;</a>
      <ul>
        <li><a href="#">Web Design</a></li>
        <li><a href="#">Web Development</a></li>
        <li><a href="#">SEO</a></li>
      </ul>
    </li>
    <li><a href="#">About Us</a></li>
    <li><a href="#">Contact Us</a></li>
  </ul>
</nav>

rrree

4. Conclusion

In this article, we learned how to use CSS to implement a secondary menu. We explain the HTML structure and CSS code and provide a complete example to help readers better understand this technique. Hope this article helps you!

The above is the detailed content of An example explains how to implement a secondary menu using pure CSS. For more information, please follow other related articles on the PHP Chinese website!