[reprint] ul li css do landscape menu

Original address: http://www.cnblogs.com/amylis_chen/archive/2011/09/24/2188398.html

First step: Create an unordered list we first create a sequence-free table to create a menu structure. The code is:

<ul> <li><a href= "1" > Home </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>

Second step: Hide the Li's default style because it doesn't look good, the menu usually doesn't need the Li default dot, we define a style for UL to eliminate these dots.

Of course, in order to better control the entire menu, we put the menu in a Div. The page code becomes:

<div class= "Test" > <ul> <li><a href= "1" > Home </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>

The CSS is defined as:

. Test Ul{list-style:none;}

Description: ". Test ul" means that the style I want to define will be on the UL label in Test's layer.

The effect now is that there are no dots:

Step three: Key floats here is the key to the menu becoming horizontal, we add a "float:left" to the LI element; Property so that each Li floats to the left of the previous li.

The CSS is defined as:

. Test Li{float:left;}

The menu has changed to landscape. It's so easy! The next thing to do is to optimize the details.

Fourth step: Adjust the width of the menu is crowded together bad look how to do? Let's adjust the width of li.

Adding a definition in CSS width:100px specifies that the width of an li is 100px, and of course you can adjust the values according to your needs:

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

The effect is:

If we define the width of the outer div at the same time, Li will wrap the line according to the width of the Div, for example, to define the width of the div 350px,6 Li is 600px, and one row will automatically become two lines:

. test{width:350px;}

Fifth step: Set basic link effect Next, we use CSS to set the style of the link, respectively: Link,: visited,: hover state

. 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;}

Sixth step: Show Links as block-level elements a friend asks, why does the background color of the menu link not fill the width of the whole li? Well, the solution is simple, add display:block to the style definition of a, and make the links appear as block-level elements.

At the same time we fine-tune the following details:

Use Text-align:center to center the menu text, increase the height of the background with height:30px, use margin-left:3px to make 3px distance between each menu, use line-height:30px, define row height, and make the link text vertically centered; The CSS definition looks like this:

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

That's a lot prettier.

Seventh step: Define a background image we usually add a small icon before each link, so the navigation is clearer. CSS is implemented using a background image that defines Li:

. 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;}

Description: "Background:url (arrow_off.gif) #CCC no-repeat 5px 12px;" This code is a CSS abbreviation, indicating that the background image is arrow_off.gif, background color is #ccc, background image does not repeat "no-repeat", the position of the background image is the left margin 5px, the top margin 12px;

By default, the icon is arrow.off.gif, and when you move the mouse over the link, the icon changes to Arrow_on.gif

The effect becomes:

Now the full code for the CSS 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 code for the page is:

<div class= "Test" > <ul> <li><a href= "1" > Home </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>

OK, the main step is these 7 steps, immediately copy and modify the code to try, you can also use CSS to do landscape menu!

[reprint] ul li css do landscape menu