How to use display:olck/none to create a menu bar

The effect of completing a menu bar through display:bolck/none Figure 1:

First, here is a completed effect. When we move the mouse into the "menu" area, it will pop up. The effect of Figure 2

Figure 2:

On the contrary, if we move the mouse out of the "Menu" area, the submenu below will be hidden, and we will get the effect shown in Figure 1.

Figure 3:

The source code in the figure is the implementation of the content style structure of Figure 1 and Figure 2. We first give a large div to make a large box for the displayed content, and put 5 divs in the box to complete the content to be presented. Then set a "left float" style for these 5 divs so that they can be arranged side by side in a row. Of course, you can also set it to an "inline block-level element" and put an "unordered list" in it to present the content of the submenu.

Figure 4:

1. Let's set some basic styles for the top li first, give this tag an (absolute positioning) position: relative; then set a (relative positioning) position: absolute for its subordinate ul; 2. Set the |display| of this ul to |none| to hide it - refer to Figure 5 - U2 part. 3. Then set the (pseudo-class) hover to call the class name of the subordinate ul, and set the | display | of ul to | block | —— Figure 4 —— Realize that when the mouse moves over this li, the subordinate ul will be displayed

Figure 5:

Finally, if you feel the effect is a bit stiff, we can use @keyframes to set the transform animation effect and set the animation effect we want according to our own preferences.

This is the end of this article on how to complete a menu bar through display:olck/none. For more relevant display:olck/none menu bar content, please search 123WORDPRESS.COM’s previous articles or continue to browse the related articles below. I hope everyone will support 123WORDPRESS.COM in the future!