How to make html drop-down menu? Code example introduction to html drop-down menu-HTML Tutorial-php.cn

How to make html drop-down menu? Code example introduction to html drop-down menu

寻∝梦

Release： 2022-04-02 19:46:04

Original

111887 people have browsed it

This article mainly introduces examples of how to use HTML select tag drop-down menus. There is also an article about the usage of drop-down menus on some HTML websites. Let us take a look at this article together. Bar

How to make html drop-down menu? Code example introduction to html drop-down menu

#First we need to know what is the code of the html drop-down menu?

Obviously, the select element can create a single-select or multi-select menu.

The

Tip: The select element is a form control that can be used to accept user input in a form.

Let’s look at an example of drop-down menu code:

Create a selection list with 4 options:

<select>
  <option value ="volvo">PHP中文网</option>
  <option value ="saab">百度</option>
  <option value="opel">腾讯</option>
  <option value="audi">新浪</option>
</select>

Copy after login

Just such a simple drop-down The menu is complete, let's take a look at the effect:

How to make html drop-down menu? Code example introduction to html drop-down menu

This is the most basic. If you add a css style, you can make this form very beautiful. Basically, there are no websites that do this. They only do it when they want to try their hand.

Now let’s see what this kind of drop-down box looks like on a real website.

Here is a complete code example:

<!DOCTYPE html>
<html> 
<head> 
<meta charset="UTF-8"> 
<title></title> 
<style> .a{ width: 205px; } .b{ width: 200px; height: 50px; background-color: limegreen; text-align: center; 
line-height: 50px; color: #ffffff; } .c{ width: 200px; height: 300px; background-color: gainsboro; display: none; 
/*visibility: hidden;*/ } ul{ list-style: none; margin-left: -40px; } ul li{ line-height: 50px; display: block; 
width: 200px; text-align: center; } .a:hover{ cursor: pointer; } .a:hover .c{ display: block; } .a:hover 
.b{ background-color: green; } li:hover{ background-color: gray; color: #FFFFFF; } 
</style> 
</head> 
<body> 
<div class="a"> 
<div class="b">PHP中文网</div> 
<div class="c"> 
<ul> <li>HTML在线学习</li>
<li>PHP在线学习</li>
<li>python在线学习</li> 
<li>html5在线学习</li> 
</ul> 
</div> </div> 
</body>
</html>

Copy after login

Although it is a bit more, the effect can be very good. Let us see how it is displayed in the browser.

How to make html drop-down menu? Code example introduction to html drop-down menu

This is the newly refreshed style. Now look at the changes after the mouse is placed on it:

How to make html drop-down menu? Code example introduction to html drop-down menu

After completion, this is Like this, you can also try using this code, or you can type out the code yourself. This style is what it looks like when we usually browse the website. As soon as you move the mouse away, the effect will return to the picture above. style.

This article about HTML drop-down menus ends here. If you have any questions, you can ask them below.

【Editor's Recommendation】

What is the document object in html? An article to help you understand the document object

#What is the code for adding images in HTML? How to add image path correctly in html?

The above is the detailed content of How to make html drop-down menu? Code example introduction to html drop-down menu. For more information, please follow other related articles on the PHP Chinese website!