纯CSS开发的两级菜单模型

自从做完毕业设计，好久都没有折腾过DIV+CSS了，虽然CCS里面的属性就那么几个，可是要是真认真研究出来，其实还是可以做出蛮多的东西的呢！~特别CSS ，在网上看到太多有关它的“光荣事迹”，特别的牛气哄哄。所以说，对它顶礼膜拜一点也不过分。

其实，参照《W3C标准深入体验》 CSS做二级菜单，网上也很多，今天我也在这里班门弄斧一下。

我想说的是，用CSS 开发 级联的二级菜单，其实不算难，只要理解几个东西。比如  当一进入的时候，把子菜单给隐藏了；当把鼠标移动到父级菜单的时候，把它下面的子菜单给显示出来；还有就是我觉得很重要的就是要比较深刻的理解 绝对定位(absolute)和相对定位(relative)的概念，这样就能把子菜单的位置定在恰当的位置。

下面是HTML的代码：主要就是用ul来进行。

<div class="menu">
<ul>
<li><a class="" href="">首页</a>
<ul>
<li><a href="" title="">注册</a></li>
<li><a href="" title="">登录</a></li>
<li><a href="" title="">注销</a></li>
<li><a href="" title="">行业新闻</a></li>
</ul>
</li>
<li><a class="" href="">商务中心</a>
<ul>
<li><a href="" title="">客户首单</a></li>
<li><a href="" title="">新建任务单</a></li>
<li><a href="" title="">客户单跟踪</a></li>
<li><a href="" title="">历史往来记录</a></li>
<li><a href="" title="">业务签收</a></li>
</ul>
</li>
<li><a class="" href="">配送中心</a>
<ul>
<li><a href="" title="">新建配送单</a></li>
<li><a href="" title="">车辆检查</a></li>
<li><a href="" title="">业务跟踪</a></li>
</ul>
</li>
<li><a class="" href="">运输中心</a>
<ul>
<li><a href="" title="">新建派车单</a></li>
<li><a href="" title="">车辆跟踪</a></li>
</ul>
</li>
<li><a class="" href="">系统维护</a>
<ul>
<li><a href="" title="">城市数据</a></li>
<li><a href="" title="">集团公司信息</a></li>
<li><a href="" title="">部门信息</a></li>
<li><a href="" title="">员工信息</a></li>
<li><a href="" title="">仓库数据</a></li>
</ul>
</li>
<li><a class="" href="">我的任务</a>
<ul>
<li><a href="" title="Example one">我提交的任务</a></li>
<li><a href="" title="">我收到的任务</a></li>
<li><a href="" title="">被退回的任务</a></li>
</ul>
</li>
<li><a class="" href="">技术支持</a>
<ul>
<li><a href="" title="">技术架构</a></li>
<li><a href="" title="">应用说明</a></li>
<li><a href="" title="">关于我们</a></li>
</ul>
</li>
</ul>
<div class="clear">
</div>
</div>

下面就是CSS代码了：

<style type="text/css">
.menu
{
font-family: 宋体, Arial, Helvetica, sans-serif;
width: 750px;
margin: 0;
margin: 5px 0 50px 0;
}
.menu ul
{
padding: 0;
margin: 0;
list-style-type: none;
}
.menu ul li
{
float: left;
position: relative;
}
.menu ul li a, .menu ul li a:visited
{
display: block;
text-align: center;
text-decoration: none;
width: 104px;
height: 30px;
color: #000;
border: 1px solid #fff;
border-width: 1px 1px 0 0;
background: #c9c9a7;
line-height: 30px;
font-size: 11px;
}
.menu ul li ul
{
display: none;
}
.menu ul li:hover a
{
color: #fff;
background: #b3ab79;
}
.menu ul li:hover ul
{
display: block;
position: absolute;
top: 31px;
left: 0;
width: 105px;
}
.menu ul li:hover ul li a
{
display: block;
background: #faeec7;
color: #000;
}
.menu ul li:hover ul li a:hover
{
background: #dfc184;
color: #000;
}
</style>

都挺好理解的~在把这图给贴上吧，效果图如下：