Create a horizontal menu with CSS

Although I have mentioned the CSS menu creation method on my website and articles, many beginners still do not know how to implement it and how it works, I want to write a detailed tutorial to help you.

Let's take a look at a menu example. The final result is:

• Homepage
• Product Introduction
• Service Introduction
• Technical Support
• Buy now
• Contact us

Next, let's explain the procedure in detail.

Step 1: Create an unordered list

We first create an unordered list to create a menu structure. The code is:

<Ul>
<Li> <a href = "1"> homepage </a> </li>
<Li> <a href = "2"> product introduction </a> </li>
<Li> <a href = "3"> service Introduction </a> </li>
<Li> <a href = "4"> technical support </a> </li>
<Li> <a href = "5"> buy now </a> </li>
<Li> <a href = "6"> Contact Us </a> </li>
</Ul>

Effect:

• Homepage
• Product Introduction
• Service Introduction
• Technical Support
• Buy now
• Contact us

Step 2: Hide the default li style

Because it does not look very nice, the menu usually does not need the default dot li, we define a style for UL to eliminate these dots.

Of course, to better control the entire menu, we put the menu in a div. The page code is changed:

<Div class = "test"> <ul>
<Li> <a href = "1"> homepage </a> </li>
<Li> <a href = "2"> product introduction </a> </li>
<Li> <a href = "3"> service Introduction </a> </li>
<Li> <a href = "4"> technical support </a> </li>
<Li> <a href = "5"> buy now </a> </li>
<Li> <a href = "6"> Contact Us </a> </li>
</Ul> </div>

CSS is defined:

. Test ul {list-style: none ;}

Note: ". test ul" indicates that the style I want to define will apply to ul labels in the test layer.

Now the effect is no dot:

• Homepage
• Product Introduction
• Service Introduction
• Technical Support
• Buy now
• Contact us

Step 3: Key fluctuations

Here is the key to changing the menu to landscape. we add a "float: left;" attribute to the li element to let each li float on the left of the previous li.

CSS is defined:

. Test li {float: left ;}

Effect:

• Homepage
• Product Introduction
• Service Introduction
• Technical Support
• Buy now
• Contact us

Check that the menu is changed horizontally. That's easy! The following is the optimization details.

Step 4: Adjust the width

What if menus are crowded together? Let's adjust the li width.

Add the definition width: 100px in CSS to specify that the width of a li is 100px. You can adjust the value as needed:

. Test li {float: left; width: 100px ;}

Effect:

• Homepage
• Product Introduction
• Service Introduction
• Technical Support
• Buy now
• Contact us

If we define the width of the external div at the same time, li will automatically wrap the line according to the div width. For example, we define the div width 350px, and the total width of the six li is 600px, if one row is not ranked, the system automatically changes to two rows:

. Test {width: 350px ;}

Effect:

• Homepage
• Product Introduction
• Service Introduction
• Technical Support
• Buy now
• Contact us

Step 5: set the basic link Effect

Next, we use CSS to set the link styles and define the statuses of link, visited, and hover respectively.

. Test a: link {color: #666; background: # CCC; text-decoration: none ;}
. Test a: visited {color: #666; text-decoration: underline ;}
. Test a: hover {color: # FFF; font-weight: bold; text-decoration: underline; background: # F00 ;}

Effect:

• Homepage
• Product Introduction
• Service Introduction
• Technical Support
• Buy now
• Contact us

Step 6: display the link as a block-level element

A friend asked, why didn't the background color of the menu link fill the entire li width? Well, the solution is very simple. Add the display: block in the style definition of a to display the link as a block-level element.

At the same time, we have fine-tuned the following details:

• Use text-align: center to center the menu text;
• Use height: 30px to increase the background height;
• Use margin-left: 3px to leave a 3px distance between menus;
• Use line-height: 30px to define the line height so that the link text is vertically centered;

CSS is defined as follows:

. Test a {display: block; text-align: center; height: 30px ;}
. Test li {float: left; width: 100px; background: # CCC; margin-left: 3px; line-height: 30px ;}

Effect changed:

• Homepage
• Product Introduction
• Service Introduction
• Technical Support
• Buy now
• Contact us

This is more beautiful.

Step 7: Define a background image

We usually add a small icon in front of each link to make the navigation clearer. CSS is implemented by defining the li background image:

. Test a: link {color: #666; background: url(arrow_off.gif) # CCC no-repeat 5px 12px; text-decoration: none ;}
. Test a: hover {color: # FFF; font-weight: bold; text-decoration: none; background: url(arrow_on.gif) # F00 no-repeat 5px 12px ;}

Note: "background: url(arrow_off.gif) # CCC no-repeat 5px 12px? this code is a CSS scaling. The background image is arrow_off.gif; the background color is # CCC; the background image is not repeated." no-repeat ", the position of the background image is 5px on the left and 12px on the top;

When the mouse moves to the chain, the image is marked as arrow.off.gif.

Effect changed:

• Homepage
• Product Introduction
• Service Introduction
• Technical Support
• Buy now
• Contact us

The complete css code is:

. Test ul {list-style: none ;}
. Test li {float: left; width: 100px; background: # CCC; margin-left: 3px; line-height: 30px ;}
. Test a {display: block; text-align: center; height: 30px ;}
. Test a: link {color: #666; background: url(arrow_off.gif) # CCC no-repeat 5px 12px; text-decoration: none ;}
. Test a: visited {color: #666; text-decoration: underline ;}
. Test a: hover {color: # FFF; font-weight: bold; text-decoration: none; background: url(arrow_on.gif) # F00 no-repeat 5px 12px ;}

The complete page code is:

<Div class = "test">
<Ul>
<Li> <a href = "1"> homepage </a> </li>
<Li> <a href = "2"> product introduction </a> </li>
<Li> <a href = "3"> service Introduction </a> </li>
<Li> <a href = "4"> technical support </a> </li>
<Li> <a href = "5"> buy now </a> </li>
<Li> <a href = "6"> Contact Us </a> </li>
</Ul>
</Div>

Now, the main step is to copy and modify the code immediately. You can also use CSS for the horizontal menu!