CSS Vertical tree pull down menu

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.