Simple CSS menu: Learn CSS

Source: Internet
Author: User

 I have always been very interested in CSS + Div layout, especially in the face of IE6, which is a tough problem. We always try our best to take care of it. I usually seldom learn this and take notes here.

You can also create a nice navigation menu using the image designed by the artist, but you can still use the clever CSS.

Here is a navigation that I created on the jquery Website ,:



1. Compile HTML.


2. Write CSS.

I plan to use two images. In Chapter 1, fill in the left side of the navigation. This image must be long and can be fully wrapped with the increase of <li> in # header_nav.

Use the second image to fill the rightmost navigation. Both images have rounded corners, making the navigation smoother.



Note that the rounded corner of the image is black. The blue color of the image can be used with the black color to make the navigation display more obvious.

First, set the background of # header_nav to the first image and the background of <ul> to the second image.

Set border isolation on both sides of <li>.


3. Set the edges of the first <li> and last <li>.


Of course, this is set through CSS, but JS is used for the sake of simplicity of CSS.

Add the source code.


Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.