纯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>

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