How to implement the drop-down menu effect of the navigation bar through pure CSS

How to achieve the drop-down menu effect of the navigation bar through pure CSS

In web design, the navigation bar is a very common component, and the drop-down menu is the navigation bar A common effect in . In this article, we will learn how to implement the drop-down menu effect of the navigation bar using only CSS, and provide detailed code examples.

First, we need a basic navigation bar structure, as shown below:

<nav class="navbar">
  <ul class="nav-list">
    <li class="nav-item">首页</li>
    <li class="nav-item">产品</li>
    <li class="nav-item dropdown">
      <a href="#" class="dropdown-btn">服务</a>
      <ul class="dropdown-menu">
        <li><a href="#">服务一</a></li>
        <li><a href="#">服务二</a></li>
        <li><a href="#">服务三</a></li>
      </ul>
    </li>
    <li class="nav-item">关于我们</li>
    <li class="nav-item">联系我们</li>
  </ul>
</nav>

In this structure, we use a nav element as the container of the navigation bar , contains an ul element internally as a container for navigation items, and uses the li element in each navigation item. For the navigation item containing the drop-down menu, we add a special class name dropdown, and a a element for the drop-down menu trigger.

Next, we use CSS to achieve the effect of the drop-down menu. The specific code is as follows:

.navbar {
  background-color: #f0f0f0;
  padding: 10px;
}

.nav-list {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
}

.nav-item {
  margin-right: 10px;
}

.dropdown {
  position: relative;
}

.dropdown > .dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #f0f0f0;
}

.dropdown:hover > .dropdown-menu {
  display: block;
}

.dropdown-menu li {
  padding: 5px;
}

.dropdown-menu a {
  color: #333;
  text-decoration: none;
}

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

In this CSS code, we first set the style of the navigation bar. Next, we set the style of the drop-down menu. First, we set the display property of the drop-down menu to none so that it is invisible by default. Then, via the .dropdown:hover > .dropdown-menu selector, when the mouse is hovering over the navigation item containing the dropdown menu, set the display property of the dropdown menu to block, to achieve the display effect of drop-down menu.

Finally, we styled the menu items in the drop-down menu, including background color, spacing, text color, etc.

Through the above CSS code and HTML structure, we implemented a simple navigation bar and successfully added a drop-down menu effect. You can make subtle style adjustments according to your needs, such as font size, background color, etc.

To sum up, it is not complicated to realize the drop-down menu effect of the navigation bar through pure CSS. It only needs a simple HTML structure and a small amount of CSS code to complete. I hope this article is helpful to you, and if you have any questions, please feel free to ask.

The above is the detailed content of How to implement the drop-down menu effect of the navigation bar through pure CSS. For more information, please follow other related articles on the PHP Chinese website!