How does the HTML navigation bar drop-down menu be made? Here are the detailed code examples

This article describes the HTML navigation bar drop-down menu production, the beginning of the article gives the entire navigation bar drop-down menu code, did not understand the following are detailed explanations. Let's see this article together

What we're talking about is the HTML navigation bar drop-down menu, which first looks at a complete example code:

<style>.dropdown {    position:relative;    Display:inline-block;}. dropdown-content {    display:none;    Position:absolute;    Background-color: #f9f9f9;    min-width:160px;    box-shadow:0px 8px 16px 0px Rgba (0,0,0,0.2);    padding:12px 16px;    Z-index:1;}. Dropdown:hover. dropdown-content {    display:block;} </style><div class= "dropdown" >  <span>php Chinese network </span>  <div class= " Dropdown-content ">    <p>hello world!</p>    <p>hello world!</p>  </div ></div>

Do you understand this code?

Do not understand also is OK, this has the explanation, after the explanation is finished you will understand.

HTML Navigation bar Menu Instance parsing:

HTML section of the HTML Navigation bar menu:

We can use any HTML element to open a drop-down menu, such as: <span>, or a<button> element.

Use container elements (such as:<div>) to create the contents of the drop-down menu and place it wherever you want.

Use the <div> element to wrap these elements and use CSS to style the drop-down content.

CSS section of the HTML Navigation bar menu:

The. Dropdown class uses position:relative, which sets the drop-down menu's contents to the lower-right corner of the drop-down button (using Position:absolute).

The. Dropdown-content class is the actual drop-down menu. The default is hidden, which is displayed when the mouse is moved to the specified element. Note The value of Min-width is set to 160px. You can change it as you please. Note: If you want to set the dropdown content to the same width as the drop-down button, you can set the width to 100% (overflow:auto setting can scroll on the small screen).

We use the Box-shadow property to make the drop-down menu look like a "card."

: The hover selector is used to display a drop-down menu when the user moves the mouse over the drop-down button.

After reading the explanation, now a little understand it. Take these explanations to the code above and then you'll understand.

Now let's take a look at the effect of the above code shown in the browser:

This is the default situation, it is not visible at all, like a text, but the mouse moved up, it will change:

See, this is the effect of the code, there is a navigation bar drop-down list, the stealth navigation bar, the mouse moved up to react.

This is the navigation bar drop-down menu of simple production, the problem can be in the message below.