Solution
The best way to display submenus in a navigation system is to create a child list in a list. The two-level navigation bar of this tag is easy to understand – even if the browser does not support CSS.
To produce a multilevel navigation bar, we create a nested list that styles colors, boundaries, 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" >
<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"/>
<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>
#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 ul {
margin-left:12px;
}
#navigation ul ul Li {
border-bottom:1px solid #711515;
margin:0;
}
#navigation ul ul A:link, #navigation ul ul a:visited {
Background-color: #ED9F9F;
Color: #711515;
}
#navigation ul ul a:hover {
Background-color: #711515;
Color: #FFFFFF;
}
Add these later display effects as shown in Figure 4.
Figure 4. Navigation bar that contains submenus
Discuss
A nested list is a good way to describe the navigation bar system that we are doing. The first list contains the main parts of the site, and the Recipes below the Recipes shows the children within the range. Even without any CSS style, the structure of the list is still clear and easy to understand, as you can see in Figure 5 .
Figure 5: A navigation bar with no styles, including submenus
Here is the HTML code that we use to mark this simple nested list in the main project's Li element:
<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>
With HTML, if you simply use the CSSin front of this article without making any changes, the navigation menu will display as shown in Figure 6. Because the Li element inherits the style of the main menu, the child list will show the same style as the dominant navigation bar.
Figure 6: Using the Default Style Table submenu navigation bar
To let the nested list show that it is a submenu rather than a part of the dominant navigation bar, let's add a style rule:
#navigation ul ul {
margin-left:12px;
}
This rule indents the nested list so that it aligns to the right edge of the main menu, as shown in Figure 7 :
Figure 7: A navigation bar with indented rules
Finally, let's add some simple styles to the Li and a elements in the nested table to improve the effect:
#navigation ul ul Li {
border-bottom:1px solid #711515;
margin:0;
}
#navigation ul ul A:link, #navigation ul ul a:visited {
Background-color: #ED9F9F;
Color: #711515;
}
#navigation ul 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
