<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <HTML xmlns = "http://www.w3.org/1999/xhtml">
The normal unordered list has a default style. The above page is shown as (Figure 1 ):
So we need to clear its default style, that is, UL's list-style: None, which is displayed as follows (Figure 2 ):
Next we will add a secondary subnode:
<Ul> <li> <a href = "#"> 1 </a> <ul> <li> <a href = "#"> 11 </a> </ LI> <li> <a href = "#"> 11 </a> </LI> </ul> </LI> <li> <a href = "#"> 2 </a> <ul> <li> <a href = "#"> 22 </a> </LI> <li> <a href = ""> 22 </a> </LI> </ul> </LI> <li> <a href = ""> 3 </a> <ul> <li> <a href = ""> 33 </a> </LI> <li> <a href = ""> 33 </a> </LI> <li> <a href =" "> 33 </a> </LI> </ul> </LI> <li> <a href =" "> 4 </a> <ul> <li> <a href = ""> 44 </a> </LI> <li> <a href = ""> 44 </a> </LI> <li>The following figure is displayed in the browser (Figure 3 ):
You can see that the level-2 menu is normally displayed, so we need to make it invisible: Set the sub-unordered list to invisible:
Ul Li ul {display: none ;}
Run againProgram, Display 1. This is obviously not the expected effect. Set it as follows:
Ul Li: hover ul {display: block ;}
This setting means that when the mouse slides over the Li of the level-1 menu, the UL of the level-2 menu is displayed as a block-level element, but the running program finds that when the mouse really crosses the level-1 menu, the level-2 menu will squeeze out the level-1 menu. At this time, we should think of an attribute position: absolute; that is to say, we should set the level-2 menu to absolute positioning. In this way, the level-2 menu will be separated from the original document stream, it no longer occupies space, so it does not squeeze out the first-level menu content. In this way, a super simple vertical second-level menu is completed. CompleteCodeAs follows:
<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <HTML xmlns = "http://www.w3.org/1999/xhtml">
It is concise or simple, but I personally think it is very suitable for entry. If such a menu is handed in, no one wants it. Next we will improve it step by step, make her more beautiful:
Step 2: Complete Level 2 vertical menu The so-called perfection adds some modifiers to her, such as the background color, width, height, and margin. The modified code is presented:
<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <HTML xmlns = "http://www.w3.org/1999/xhtml">Code explanation:
- First remove the hyperlink Style
- Set the width of the outsourcing layer to one hundred and the border style;
- Set the UL outer margin, and the inner margin is then filled with NAV;
- Set the background color, height, and background style of each item in the level-1 menu. The highlight is that the position attribute is set, someone will ask where the relative positioning of top, right, bottom, and left attributes is not set, in fact, this attribute is used to make the absolute positioning of the child element no longer relative to the browser's upper left corner of the specific referenceLearning CSS positioningSummary;
- Set the left attribute of UL and use it with the parent element that has been located,
Finally, please advise if XXX exists.
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
