CSS Vertical tree pull down menu

Source: Internet
Author: User
Tags define reference relative
css| Menu | dropdown

Step One: Create a menu

First of all, it is very important to establish a menu architecture, the best way is to use the UL to establish the content of the menu from the main relationship. Is it complicated? In fact, as long as the writing down on the OK:

The following is a reference fragment:
<ul>
<li><a href= "#" >Home</a></li>
<li><a href= "#" >About</a>
<ul>
<li><a href= "#" >History</a></li>
<li><a href= "#" >Team</a></li>
<li><a href= "#" >Offices</a></li>
</ul>
</li>
<li><a href= "#" >Services</a>
<ul>
<li><a href= "#" >web design</a></li>
<li><a href= "#" >internet
Marketing</a></li>
<li><a href= "#" >Hosting</a></li>
<li><a href= "#" >domain names</a></li>
<li><a href= "#" >Broadband</a></li>
</ul>
</li>

<li><a href= "#" >contact us</a>
<ul>
<li><a href= "#" >united kingdom</a></li>
<li><a href= "#" >France</a></li>
<li><a href= "#" >USA</a></li>
<li><a href= "#" >Australia</a></li>
</ul>
</li>
</ul>

Step Two: Visual modification

The code written above can be said to be very ugly in the browser ... So let's give them some style, not because of the appearance of the problem you do not have the interest to continue to do, hehe

First we remove the annoying dots and define the width of the menu:

The following is a reference fragment:






}

Next, we want to define the contents of the inside, very lucky, the list is the default arrangement is vertical, which is consistent with our requirements, positioning mode We should be set to relative positioning (relative) because the secondary menu in the relative position of absolute positioning:

The following is a reference fragment:


}

Now we're defining the content section of the secondary menu, and we can use the left and top properties to show them on the right side of the main menu. The Display property value is none so it is hidden by default:

The following is a reference fragment:





}

The last thing you need to do is to modify a element inside:

The following is a reference fragment:








}

However, because of IE's display bug, we have to add the following paragraph to fix:

The following is a reference fragment:



/* END * *

Part III: Let it work.

We need to display the secondary menu content as we move to the main menu:

The following is a reference fragment:
Li:hover ul {display:block;}

Okay, you can test the code, 1% people may be excited to call up, hehe Unfortunately, at present, the code is not able to do on IE to make the results we want. To make IE work the same effect, we have to use a section of JS code, will not be very cumbersome:

The following is a reference fragment:

















Window.onload=startlist;

Well, other code to add, this feature can be achieved:

The following is a reference fragment:



<ul id= "NAV" >
Do it yourself, you can look better.


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: info-contact@alibabacloud.com 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.