CSS webpage layout tutorial 13: drop-down and multi-level pop-up menus

Drop-down and pop-up menus are commonly used in website design. This menu form can make full use of the current space of the page to hide and display more content, and properly classify and display the content, it is a very good form of navigation.
Early drop-down or pop-up menus hide content through hidden layer or Div, and respond to user operations through JavaScript scripts, currently, this type of navigation is also made using JavaScript + Div or other elements. The difference is that the entire navigation will be created using a standard CSS layout, instead of using tables to create menus, the drop-down menu is the combination of the horizontal navigation and vertical Navigation mentioned above. With CSS's support for many attributes, the same menu no longer requires the combination of multiple Divs, the CSS layout can be used to create the drop-down menu element, and even the UL or Li element can be directly controlled. Now, to try the simplest drop-down menu, the implementation of the drop-down menu utilizes a lot of JavaScript technology. Here, I do not have a much comprehensive understanding of the syntax of JavaScript technology. I just want to use the existing examples to tell you that due to the flexibility of CSS element attributes, it is easier and more convenient to create elements on a webpage. Let's take a look at the XHTML section of the currently designed navigation. Code :

<Ul id = "nav">
<Li> <a href = ""> Article </A>
<Ul>
<Li> <a href = ""> CSS tutorial </a> </LI>
<Li> <a href = ""> Dom tutorial </a> </LI>
<Li> <a href = ""> XML tutorial </a> </LI>
<Li> <a href = ""> flash tutorial </a> </LI>
</Ul>
</LI>
<Li> <a href = ""> reference </a>
<Ul>
<Li> <a href = ""> XHTML </a> </LI>
<Li> <a href = ""> XML </a> </LI>
<Li> <a href = ""> CSS </a> </LI>
</Ul>
</LI>
<Li> <a href = ""> blog </a>
<Ul>
<Li> <a href = ""> all </a> </LI>
<Li> <a href = ""> webpage technology </a> </LI>
<Li> <a href = ""> UI technology </a> </LI>
<Li> <a href = ""> Flash technology </a> </LI>
</Ul>
</LI>
</Ul>
<Ul>
<Li> <a href = ""> Rock </a> </LI>
<Li> <a href = ""> pure music </a> </LI>
<Li> <a href = ""> classical jinqu </a> </LI>
<Li> <a href = ""> original movie sound </a> </LI>
</Ul>

A standard menu consists of UL structures, but unlike the previous one, the code structure here involves nesting and another ul structure is inserted between the Li at the first layer, this is a code composition mode for multi-level menus. XHTML Code allows you to implement the desired effect or structure through nested elements. Next, we will try to write some simple CSS styles to make the menu a desired horizontal style:

Ul {padding: 0; margin: 0; List-style: none ;}
Li {float: Left; width: 100px ;}

Step 1: Perform basic settings for UL elements in the navigation system. The list-style: None attribute can help us remove all the dots in ul. The list-style attribute has other rich usage methods, which will be highlighted in the following list elements.
We hope that the navigation is horizontal. By setting the float: Left attribute for Li, we will float all Li to the left to form a horizontal layout, and try to use the width of each Li to PX, continue to write the code:

Li ul {display: none; top: 20px ;}

The definition of Li ul here refers to all ul elements under Li, except the top ul elements, all ul elements defined under Li will be defined by this part of the style. The top attribute is used to set the top margin of the entire ul, and display: none is used to make this part get up. The display attribute can be used to control the display or hide elements in CSS.

Li: hover ul, Li. Over ul {display: block ;}

Li: hover ul defines the UL element under the Li element. Use commas to separate the display: block attributes. The display: block attribute is the opposite of the display: None attribute, while the display: None attribute is hidden, when set to display: block, not only the assigned elements are displayed, but also a block. If the display: block is not performed, the element is only displayed in the area occupied by its own content on the screen. When the display: block is used, the element forms a wide block as its own point operator, this setting is very convenient for the big button.

At the bottom of the preview, you can see that the JS Code and segment are added to the Code. It is used to control the display of the drop-down menu under the IE browser. Li: hover ul is acceptable, but IE's support for CSS is still complete, so Javascript is needed for control.
Next we try to add some styles to the drop-down menu:

Ul Li a {display: block; font-size: 12px; Border: 1px solid # CCC; margin-top: 2px; margin-left: 3px; padding: 3px; text-Decoration: none; color: #777 ;}
Ul Li A: hover {background-color: # DDD ;}

The drop-down menu control of CSS layout focuses on hiding and displaying elements.Xmlns = "http://www.w3.org/1999/xhtml">

• Article
  • CSS tutorial
  • Dom tutorial
  • XML tutorial
  • Flash tutorial
• Reference
  • XHTML
  • XML
  • CSS
• Blog
  • All
  • Web technology
  • Ui Technology
  • Flash technology

• Rock
• Pure music
• Classical jinqu
• Original Movie sound