Solution
The best way to display sub-menus in a navigation system is to create a sub-list in a list. The two levels of navigation bar marked in this way can be easily understood-even if the browser does not supportCSS.
To generate a multi-level navigation bar, we create a nested list to style the color, border, and link attributes for these new list items:
<! Doctype HTML public "-// W3C // dtd xhtml 1.0 strict // en"
Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd>
<HTML xmlns = "http://www.w3.org/1999/xhtml" lang = "En-us">
<Head>
<Title> lists as navigation </title>
<Meta http-equiv = "Content-Type"
Content = "text/html; charset = UTF-8"/>
<LINK rel = "stylesheet" type = "text/CSS" href = "listnav_sub.css"/>
</Head>
<Body>
<Div id = "navigation">
<Ul>
<Li> <a href = "#"> recipes </a>
<Ul>
<Li> <a href = "#"> starters </a> </LI>
<Li> <a href = "#"> main courses </a> </LI>
<Li> <a href = "#"> desserts </a> </LI>
</Ul>
</LI>
<Li> <a href = "#"> Contact Us </a> </LI>
<Li> <a href = "#"> articles </a> </LI>
<Li> <a href = "#"> buy online </a> </LI>
</Ul>
</Div>
</Body>
</Html>
# Navigation {
Width: 200px;
}
# Navigation ul {
List-style: none;
Margin: 0;
Padding: 0;
}
# Navigation Li {
Border-bottom: 1px solid # ed9f9f;
}
# Navigation Li A: Link, # navigation Li A: visited {
Font-size: 90%;
Display: block;
Padding: 0.4em 0 0.4em 0.5em;
Border-left: 12px solid #711515;
Border-Right: 1px solid #711515;
Background-color: # b51032;
Color: # ffffff;
Text-Decoration: none;
}
# Navigation Li A: hover {
Background-color: #711515;
Color: # ffffff;
}
# Navigation ul {
Margin-left: 12px;
}
# Navigation ul Li {
Border-bottom: 1px solid #711515;
Margin: 0;
}
# Navigation ul a: Link, # navigation ul a: visited {
Background-color: # ed9f9f;
Color: #711515;
}
# Navigation ul a: hover {
Background-color: #711515;
Color: # ffffff;
}
After adding these, the display effect is 4.
Figure 4. navigation bar containing sub-menus
Discussion
The nested list is a good way to describe the navigation bar system we are working on. The first list contains the main parts of the site. The sublist under the recipes displays the subparts within the recipes range. Even if there is noCSSStyle, the structure of the list is still clear and easy to understand, as you can see in Figure 5.
Figure 5: The style is not used, and the navigation bar containing the sub menu is not used.
Below is the HTML used to mark this simple nested list in the Li element of the main projectCode:
<Ul>
<Li> <a href = "#"> recipes </a>
<Ul>
<Li> <a href = "#"> starters </a> </LI>
<Li> <a href = "#"> main courses </a> </LI>
<Li> <a href = "#"> desserts </a> </LI>
</Ul>
</LI>
<Li> <a href = "#"> Contact Us </a> </LI>
<Li> <a href = "#"> articles </a> </LI>
<Li> <a href = "#"> buy online </a> </LI>
</Ul>
Use HTML.CSSIf no modification is made, the navigation menu will display 6. Because the Li element inherits the style of the main menu, the sublist will show the same style as the main navigation bar.
Figure 6: use the default style sheet sub-menu navigation bar
To make the nested list show the effect that it is a sub menu rather than a part of the main navigation bar, let's add a style rule:
# Navigation ul {
Margin-left: 12px;
}
This rule indent the nested list and align it to the right boundary of the main menu, as shown in Figure 7:
Figure 7: navigation bar with indentation rules
Finally, let's add some simple styles to the Li and a elements in the nested table to improve the effect:
# Navigation ul Li {
Border-bottom: 1px solid #711515;
Margin: 0;
}
# Navigation ul a: Link, # navigation ul a: visited {
Background-color: # ed9f9f;
Color: #711515;
}
# Navigation ul a: hover {
Background-color: #711515;
Color: # ffffff;
}
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
