CSS vertical tree drop-down menu

Step 1: create a menu

First, it is very important to establish the menu architecture. The best way is to use ul to establish the master-slave relationship of each menu content. Is it complicated? In fact, as long as you write it all the way down, it will be OK:

 

  

   

    
The following is a reference clip:
<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 2: visual modification

The code written above can be said to be very ugly in the browser directly... so we will add some styles to them, so that you will not be interested in continuing to do it because of external issues.

First, remove the annoying dot and define the width of the menu:

 

  

   

    
The following is a reference clip:
Ul {
Margin: 0;
Padding: 0;
List-style: none;
Width: 150px;
Border-bottom: 1px solid # ccc;
 }
   
  
 

Next, we need to define the content. Fortunately, the default list arrangement is vertical, which is consistent with our requirements. We should set the positioning method to relative) because the sub-menu must be absolutely positioned at the relative position:

 

  

   

    
The following is a reference clip:
Ul li {
Position: relative;
 }
   
  
 

Now we define the content of the sub-menu. We can use the left and top attributes to display them on the right side of the main menu content. the value of the display attribute is none, so it is hidden by default:

 

  

   

    
The following is a reference clip:
Li ul {
Position: absolute;
Left: 149px;
Top: 0;
Display: none;
 }
   
  
 

Finally, you have to modify the element in it:

 

  

   

    
The following is a reference clip:
Ul li {
Display: block;
Text-decoration: none;
Color: #777;
Background: # fff;
Padding: 5px;
Border: 1px solid # ccc;
Border-bottom: 0;
 }
   
  
 

However, due to the BUG in IE, you must add the following section to fix it:

 

  

   

    
The following is a reference clip:
/* Fix IE. Hide from IE Mac \*/
* Html ul li {float: left ;}
* Html ul li a {height: 1% ;}
/* End */
   
  
 

Part 3: let it work

We need to display the sub-menu content when we move to the main menu:

 

  

   

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

Now, you can test the code. 1% people may be excited. Unfortunately, these codes cannot be run on IE to make the desired results. to make IE run the same effect, we have to use a piece of JS code, which is not very cumbersome:

 

  

   

    
The following is a reference clip:
StartList = function (){
If (document. all & document. getElementById ){
NavRoot = document. getElementById ("nav ");
For (I = 0; I <navRoot. childNodes. length; I ++ ){
Node = navRoot. childNodes [I];
If (node. nodeName = "LI "){
Node. onmouseover = function (){
This. className + = "over ";
  } 
Node. onmouseout = function (){
This. className = this. className. replace & raquo;
("Over ","");
   } 
   } 
  } 
 } 
} 
Window. onload = startList;
   
  
 

Now, the other code can be supplemented to implement this function:

 

  

   

    
The following is a reference clip:
Li: hover ul, li. over ul {
Display: block ;}

<Ul id = "nav">
   
  
 

Do it yourself. It looks better.