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

Source: Internet
Author: User
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.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.