Then, add a level-1 menu in the menu layer. This level-1 menu can be a direct hyperlink, span, or Div. Someone may ask, isn't a level-1 menu a hyperlink? You can say so, but you can also apply hyperlinks to span or Div, while using SPAN or Div also has a benefit. This benefit will be discussed later. Here, let's simply add several hyperlinks.Copy codeThe Code is as follows: <Div id = "menu">
<A href = "#"> menu 1 </a> |
<A href = "#"> menu 2 </a> |
</Div>
Step 3: add the level-2 menu layer in the menu layer, as shown below.Copy codeThe Code is as follows: <Div id = "menu">
<A href = "#"> menu 1 </a> |
<A href = "#"> menu 2 </a> |
<Div id = "div1">
<A href = "#"> sub-menu 1 </a>
</Div>
<Div id = "div2">
<A href = "#"> sub-menu 1 </a>
<A href = "#"> sub-Menu 2 </a>
</Div>
</Div>
Why should I place the level-2 menu layer in the menu layer? This allows you to easily set the location of the level-2 menu layer.
Step 4: Use CSS to set the position of the level-2 menu layer. The position attribute of CSS is usually used to set the position of a layer. The attribute values are commonly used in relative, absolute, and fixed. Here, absolute is absolute positioning. When you set the layer position in this way, this layer is located based on the entire <body>. Therefore, if the browser window size changes, the layer position will change; fixed is relative positioning, and this "relative" is relative to the browser window positioning, assuming that the layer is 10 pixels away from the top of the browser window, no matter how to drag the scroll bar, this layer will appear 10 pixels away from the top of the browser window, that is, it will always appear in the browser window. Relative is also relative positioning, in which the relative positioning is relative to the original location of this layer. In relative mode, the browser will first output the location of the layer, and then offset the location of the layer, which is why we put the level-2 menu layer in the menu layer. The second-level menu layer can only be offset from the previous position, so how the browser window changes will not affect the location of the layer. Because the location of the level-2 menu layer is different, you need to set different offsets for each level-2 menu layer, as shown below. Copy code The Code is as follows: <style type = "text/CSS">
# Div1
{
Display: none;
Position: relative;
Left: 0px;
Top: 0px;
Width: 320px;
}
# Div2
{
Display: none;
Position: relative;
Left: 50px;
Top: 0px;
Width: 320px;
}
</Style>
<Div id = "menu">
<A href = "#"> menu 1 </a> |
<A href = "#"> menu 2 </a> |
<Div id = "div1">
<A href = "#"> sub-menu 1 </a>
</Div>
<Div id = "div2">
<A href = "#"> sub-menu 1 </a>
<A href = "#"> sub-Menu 2 </a>
</Div>
</Div>
In the above Code, the display in CSS sets the layer as hidden, the postion sets the layer as offset relative to the original position, the left and top settings, and the width sets the width of the layer. Of course, you can set other attributes, such as the font size, as long as you want. Note that the level-2 menu layer cannot be too far away from the level-1 menu. As mentioned above, the level-2 menu layer cannot be hidden when the mouse moves from the level-1 menu to the level-2 menu. If the level-1 menu is too far away from the level-2 menu layer, the level-2 menu layer is hidden when you move the mouse away from the level-1 menu, which means the level-2 menu cannot be achieved. Therefore, you must ensure that the level-2 menu layer cannot be hidden when you move the cursor from the level-1 menu to the level-2 menu layer. This requires two tips: the first and second level menu layers cannot be too far away from the first level menu. As shown in this example, the top attribute value of the second level menu layer is 0px, in this way, the level-2 menu cannot be hidden when you move the cursor from the level-1 menu to the level-2 menu. Second, place the level-1 menu in <div> or <span>, so that the level-2 menu layer is not hidden as long as the mouse is over <div> or <span>, in this way, it seems that the level-1 menu and level-2 menu layers are quite far away from each other, but the fact that the level-2 menu layer and level-2 menu layer are very similar, it may even overlap between the two layers.
Step 5: Set the onmouseover and onmouseout attributes of the level-1 menu and level-2 menu layer to control the display and hiding of the level-2 menu layer. This mainly sets the display attribute values of the level-2 menu layer. I will not discuss it here. The completeSource codeAs follows:Xmlns = "http://www.w3.org/1999/xhtml">
Menu 1
|
Menu 2
|
Menu 3
|
Menu 4
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
