Simple Example of DIV + CSS Sliding Door Technology

Author: zishu
The following is a navigation bar for the application on the customer Collection website.

This write did not directly control the STYLE in the form of ID. All use the CLASS form;

Copy codeThe Code is as follows: <style type = "text/css">
# Zishu li {float: left; margin-left: 5px; margin-top: 50px ;}
. Nav_a: link ,. nav_a: visited {text-decoration: none; display: block; padding-right: 10px; background: url (/upload/20073614410846.gif) no-repeat right top; margin-top: 3px; color: #000; float: left ;}
. Nav_a span {cursor: hand; background-color: # DBF0C4; font-size: 14px; background: url (/upload/20073614414862.gif) no-repeat; display: block; line-height: 29px; padding-left: 10px; cursor: hand; float: left ;}
. Nav_a: hover ,. nav_a active {text-decoration: none; display: block; padding-right: 10px; background: url (/upload/20073614410846.gif) no-repeat right bottom; margin-top: 0px; color: #000}
. Nav_a: hover span ,. nav_a: active span {background-color: # DBF0C4; font-size: 14px; background: url (/upload/20073614414862.gif) no-repeat left bottom; display: block; line-height: 29px; padding-left: 10px; margin-top: 0px; padding-top: 1px; padding-bottom: 2px; cursor: hand ;}
# Box {background: #009900; height: 4px; overflow: hidden; clear: both}
</Style>

The following is the BODY section:
Copy codeThe Code is as follows: <ul id = "zishu">
<Li class = "nav_a"> <a href = "http://fenlei.zishu.cn/l.php? C = 2104 & a = 21 "> <span> part-time internship </span> </a> </li>
<Li class = "nav_a"> <a href = "http://fenlei.zishu.cn/l.php? C = 2107 & a = 21 "> <span> vehicle sales </span> </a> </li>
<Li class = "nav_a"> <a href = "http://fenlei.zishu.cn/l.php? C = 2101 & a = 21 "> <span> local activity </span> </a> </li>
<Li class = "nav_a"> <a href = "http://fenlei.zishu.cn/l.php? C = 2102 & a = 21 "> <span> house rental and sale </span> </a> </li>
<Li class = "nav_a"> <a href = "http://fenlei.zishu.cn/l.php? C = 2105 & a = 21 "> <span> same city search </span> </a> </li>
<Li class = "nav_a"> <a href = "http://fenlei.zishu.cn/l.php? C = 2103 & a = 21 "> <span> flea market </span> </a> </li>
<Li class = "nav_a"> <a href = "http://fenlei.zishu.cn/l.php? C = 2108 & a = 21 "> <span> personal services </span> </a> </li>
<Li class = "nav_a"> <a href = "http://fenlei.zishu.cn/l.php? C = 2106 & a = 21 "> <span> learning and training </span> </a> </li>
</Ul>

Effect display:Xmlns = "http://www.w3.org/1999/xhtml">

• Part-time internship
• Vehicle Trading
• Local Activity
• House rental and sales
• City search
• Flea Market
• Personal Services
• Learning and Training