Using CSS to develop a fashionable navigation bar second article _ Experience Exchange

Solution Solutions

The best way to display submenus in a navigation system is to create a sub-list in a list. This two-level navigation bar is easy to understand – even if the browser doesn't support CSS.

To produce a multilevel navigation bar, we create a nested list that styles color, boundary, and link properties for these new list items:

"Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >

Lists as Navigation

< p="">

Content= "text/html; Charset=utf-8 "/>

• Recipes

  • Starters
  • Main Courses
  • Desserts

• Contact Us
• Articles
• Buy Online

#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 to 4.

Figure 4. Navigation bar with sub-menus

Discuss

Nested lists are a great way to describe the navigation bar system we're working on. The first list contains the main parts of the site, and the sub-list below recipes shows the sub-sections within the recipes range. Even without any CSS style, the structure of the list is clear and easy to understand, as you can see in Figure 5.

Figure 5: Navigation bar with submenu, no style used

Here is the HTML code that we use to mark this simple nested list inside the LI element of the main project:

• Recipes

  • Starters
  • Main Courses
  • Desserts

• Contact Us
• Articles
• Buy Online

With HTML, if you simply use the CSSin front of this article, without making any changes, the navigation menu display will be 6. Because the Li element inherits the style of the main menu, the sub-list renders the same style as the dominant navigation bar.

Figure 6: Navigation bar with default style sheet submenu

To make the nested list appear as a submenu rather than as part of the main 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 side of the main menu, as shown in Figure 7:

Figure 7: Navigation bar with indentation rules

Finally, let's add some simple styles for the Li and a elements inside 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;

}

