Use CSS to develop a trendy navigation bar Article 2: Experience Sharing

Can I use CSS and list to create a navigation bar with sub-menus? Sometimes we need more than one level of navigation bar-but can we create a multi-level navigation bar with a style list in CSS? 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:

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

Lists as navigation

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 {

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.

. 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, just as you can see.

: The style is not used, and the navigation bar containing the sub menu is not used.

The following is the HTML code used to mark this simple nested list in the li element of the main project:

• Recipes

  • Starters
  • Main Courses
  • Desserts

• Contact Us
• Articles
• Buy Online

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.

: 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 the following figure:

: 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;

}