How to make html drop-down menu

After learning HTML, many people want to practice some special effects. Many people want to write secondary menus. So, how to make an HTML drop-down menu? Today, let’s share how to make a drop-down menu?

The secondary menu is actually not difficult. Generally, the li tag and the ul tag are used together. The first step is We need to first write out the structure of html, including the header and body, then we put a ul tag in the li tag, and put the link we want to jump to and the font to be displayed in the li tag, as shown below :

The above effect is a simple rendering, but the secondary menu we want is still very different.

Next we give the secondary menu a style and set the margin and padding between the menus before the secondary menu to 0. The code is as follows:

<style>
*{
magin:0px;
padding:0;
}
</style>

The second step is to set the order of the selectors, div>ul>li. At this time, we will float all the unnecessary li to the left. As long as we set up the float, we are almost done making the secondary menu.

div>ul>li{float:left;}

Next we need to remove the small and medium dots of li. To remove the small dots, we can use list-style-type: none to set it, and set a height and background color.

The last step is to set the menu below to be hidden, display: none; the code is as follows:

  li{    
      list-style-type:none;    
      width: 208px;    
      height: 5epx;    
      text-align: center    
      Line-height:50px;    
      background:lightblue;}

The above is how to make the html drop-down menu Full introduction, if you want to know more about Html5 tutorial, please pay attention to php Chinese website.

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