Example: Use ul to create a horizontal CSS navigation menu

At present, the Internet site front-end page adopts the DIV + CSS architecture, because it is not only more favored by search engines, in addition, a well-structured div-based website can improve the page display speed to a certain extent.

In this tutorial, we will introduce how:Use the <ul> tag in (x) HTML to create a simple horizontal navigation menu.

Why use the <ul> label to create the navigation bar and menu bar? The reason why ul is widely used as a navigation menu is mainly because its code is clear and its layout is convenient. More importantly, it has a "semantic" effect and can facilitate further Seo.

 

Step 1: Compile the HTML code architecture of the horizontal menu

Add the following code to the navigation bar of the HTML document.

 <ul id="menu"><li><a href="http://www.baidu.com" mce_href="http://www.baidu.com">Baidu.Com</a></li><li><a href="http://www.Code52.Net" mce_href="http://www.Code52.Net">Code52.Net</a></li><li><a href="http://www.yahoo.com" mce_href="http://www.yahoo.com">Yahoo.Com</a></li><li><a href="http://www.google.com" mce_href="http://www.google.com"class="last">Google.Com</a></li></ul>

 

Step 2: Write CSS code

1. Set public styles

Add the following CSS code to the

<Style type = "text/CSS" mce_bogus = "1"> # menu {Font: 12px verdana, Arial, sans-serif; /* set the text size and font style */} # menu, # menu Li {list-style: none;/* remove the default list symbol */padding: 0; /* remove the default padding */margin: 0;/* remove the default padding */} </style>

As we all know, <li> entries in <ul> are arranged vertically by default. We need to define CSS to arrange them horizontally.

TIPS:Because we now pull out the navigation bar for independent explanation, we need to set some public styles. If you have reset the default effect in the body or other places, the above Code can be removed

2. Arrange text horizontally

As we all know, projects under the <ul> label <li> are vertically arranged by default. We need to define additional CSS attributes for horizontal arrangement.

</Style> <style type = "text/CSS" mce_bogus = "1"> # menu Li {float: Left;/* float to the left */} </style>

3,Set link style:

<Style type = "text/CSS" mce_bogus = "1"> # menu Li a {display: block;/* set the link to a block-level element */padding: 8px 50px; /* set the padding */Background: #3a4953;/* set the background color */color: # FFF;/* set the text color */Text-Decoration: none; /* remove the underline */border-Right: 1px solid #000;/* Add a separator line on the left */} </style>

We use padding (padding) to make each menu wider. If your menu is a mix of Chinese and English, we recommend setting the height and width of a single menu, in this way, the height error caused by high inconsistency between Chinese and English characters can be avoided. Set the fixed height:

<Style type = "text/CSS" mce_bogus = "1"> # menu Li a {display: block;/* set the link to a block-level element */width: 150px; /* set the width */height: 30px;/* set the height */line-Height: 30px;/* set the Row Height to the same value as the Row Height and height, you can center a single line of text vertically */Text-align: center;/* align text in center */Background: #3a4953;/* set the background color */color: # FFF; /* set the text color */Text-Decoration: none;/* remove the underline */border-Right: 1px solid #000; /* Add a separator line on the left */} </style>

4. Link hover effect:

Through the combination of the preceding steps, the preliminary framework of a horizontal navigation bar appears. This step mainly defines the hover effect of the link to make the navigation bar more beautiful. Of course, to make the navigation bar more elegant, you can define the background image on the CSS hover attribute.

<Style type = "text/CSS" mce_bogus = "1"> # menu Li A: hover {Background: # 146c9c;/* change the background color */color: # FFF; /* Change text color */} </style>

The code here is a defect, and a border will be displayed on the rightmost side. Because the first-Child pseudo class is not supported by IE browsers, we can only write one style separately, remove the last border and add an extra selection character to the HTML code.

<Ul id = "menu"> <li> <a href = "http://www.baidu.com" mce_href = "http://www.baidu.com"> Baidu. com </a> </LI> <li> <a href = "http://www.Code52.Net" mce_href = "http://www.Code52.Net"> code52.net </a> </LI> <li> <a href = "http://www.yahoo.com" mce_href = "http://www.yahoo.com"> Yahoo.com </a> </LI> <li> <a href = "http://www.google.com" mce_href = "http://www.google.com" class = "last"> google.com </a> </LI> </ul> <style type = "text/CSS" mce_bogus = "1"> # menu Li. last {border-Right: 0;/* remove the Left Border */} </style>

Now, a simple horizontal navigation menu is created, isn't it easy? The complete code is provided below:

 <Style type = "text/CSS" mce_bogus = "1"> # menu {Font: 12px verdana, Arial, sans-serif;} # menu, # menu Li {list-style: none; padding: 0; margin: 0 ;}# menu Li {float: Left ;}# menu Li a {display: block; /* if it is a mix of Chinese and English text, it is recommended to use a fixed width: 150px; Height: 30px; line-Height: 30px; text-align: center; */padding: 8px 50px; background: #3a4953; color: # FFF; text-Decoration: none; border-Right: 1px solid #000 ;}# menu Li A: hover {Background: # 146c9c; color: # FFF; text-Decoration: none; border-Right: 1px solid #000 ;}# menu Li. last {border-Right: 0; /* remove the Left Border */} </style> <ul id = "menu"> <li> <a href = "http://www.baidu.com" mce_href = "http://www.baidu.com"> Baidu. com </a> </LI> <li> <a href = "http://www.Code52.Net" mce_href = "http://www.Code52.Net"> code52.net </a> </LI> <li> <a href = "http://www.yahoo.com" mce_href = "http://www.yahoo.com"> Yahoo.com </a> </LI> <li> <a href = "http://www.google.com" mce_href = "http://www.google.com" class = "last"> google.com </a> </LI> </ul>

You can view our Online Demo and download the instance package provided in this Article.

Articles you may be interested in:

CSS tutorial: Create a vertical/horizontal menu with pure CSS

The beauty of CSS: Creating standard and beautiful navigation bar menus

Cross-browser CSS multi-level floating drop-down menu

CSS creates a beautiful step menu

Beautiful JavaScript floating multi-level drop-down menu

> More menu effects of CSS and JavaScript