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:

In this structure, we use anavelement as the container of the navigation bar , contains anulelement internally as a container for navigation items, and uses thelielement in each navigation item. For the navigation item containing the drop-down menu, we add a special class namedropdown, and aaelement 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 thedisplayproperty of the drop-down menu tononeso that it is invisible by default. Then, via the.dropdown:hover > .dropdown-menuselector, when the mouse is hovering over the navigation item containing the dropdown menu, set thedisplayproperty of the dropdown menu toblock, 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!