Structure of pure CSS

 

First draw a picture

 

The Css code is as follows:

Div # contain {
Width: 1000em;
Background: # fff;
Font-family: verdan;
}
Ul # xflow {
Float: none;
Margin: 0 auto;
}
Ul {
Clear: left;
Margin: 2em 0 0 0;
Padding: 0;
Background: # fff;
}
Ul {
Border-top: 1px solid #000;
Width: auto;
}
Ul. solo {
Border-top: 0;
}
Li {
Float: left;
List-style: none;
Position: relative;
}
Li {
Margin:-1px 0 0 0;
}
# Xflow div {
Background: url (../img/Flow/vLine.gif) 50% repeat-y;
Padding: 2em 5px 0 5px;
Margin: 0. 3em-2em 0em;
}
# Xflow div. section {
Padding: 2em 5px 2em 5px;
}
# Xflow div. first {
Background: url (../img/Flow/first.gif) 50% repeat-y;
Margin-left: 0;
}
# Xflow div. last {
Background: url (../img/Flow/last.gif) 50% repeat-y;
Margin-right: 0;
}
. None {border: 0px ;}
# Xflow div. root {
Padding-top: 0;
}
# Xflow {
Display: block;
Background: # fff;
Border: 1px solid #000;
Padding:. 25em. 2em. 2em. 2em;
Color: #222;
Text-decoration: none;
Margin: 0 auto;
Width: 10em;
Line-height: 2em;
Text-align: center;
}

/* IE 6 (when comma-separated, IE6 didn't work, so these are duped for IE7 )*/
* Html {text-align: center ;}
* Html a {margin: 0; position: relative ;}
/* IE 7 */
*: First-child + html {text-align: center ;}
*: First-child + html a {margin: 0; position: relative ;}

Html structure:

<Div id = "contain">
<Ul class = "solo" id = "xflow">
<Li>
<Div class = 'root section '>
<A> General Manager </a> </div>
<Ul class = "">
<Li>
<Div class = 'first'>
<A> Financial Director </a> </div>
</Li>
<Li>
<Div class = ''>
<A> Human Resources Director </a> </div>
</Li>
<Li>
<Div class = 'core'>
<A> marketing director </a> </div>
<Ul class = "none">
<Li>
<Div class = 'core'>
<A> Marketing Manager </a> </div>
<Ul class = "none">
<Li>
<Div class = ''>
<A> Marketing Assistant </a> </div>
</Li>
</Ul>
</Li>
</Ul>
</Li>
<Li>
<Div class = 'core'>
<A> product director </a> </div>
<Ul class = "">
<Li>
<Div class = 'first'>
<A> Manager </a> </div>
</Li>
<Li>
<Div class = 'last'>
<A> Manager </a> </div>
</Li>
</Ul>
</Li>
<Li>
<Div class = 'last'>
<A> R & D Director </a> </div>
</Li>
</Ul>
</Li>
</Ul>
</Div>

Author: AppleCn

<Script> </script>