之前写过一个用jQuery实现的下拉菜单，可以实现无限级子菜单。其实用CSS也可以实现相同的功能，而且代码量更少，最起码不用那一大堆的JS控制代码。代码如下：

这是HTML代码

<div id="menu">
<ul>
<li><a href="">菜单一</a>
    <ul>
    <li><a href="">子菜单1</a></li>
    <li><a href="">子菜单2</a>
         <ul><li><a href="">子菜单7</a></li></ul>
    </li>
    <li><a href="">子菜单3</a></li>
    </ul>
</li>
<li><a href="">菜单二</a>
    <ul>
    <li><a href="">子菜单4</a></li>
    <li><a href="">子菜单5</a></li>
    <li><a href="">子菜单6</a></li>
    </ul>
</li>
</ul>
</div>

下面是CSS控制代码，相比之前的，就多了一句#menu li:hover>ul{display:block;}，就是只有在鼠标悬停在<li>时才显示其子标签<ul>。这也是控制子菜单显示的关键所在。

ul,ol,li
{list-style:none;padding:0px;margin:0px;}
#menu *
{line-height:30px;z-index:10;}
#menu a
{
    text-decoration:none;
    display:block;
}
#menu ul
{
    text-align:left;
    background:#333;
}
#menu .arrow  /* 菜单项的右侧小箭头  */
{
    float:right;
    padding-right:5px;
}
#menu li:hover>ul
{display:block;}
#menu>ul{height:30px;} /* 即使没有菜单项也能保持顶级菜单栏的高度。 */

/* 一级菜单 */
#menu>ul>li
{
    text-align:center;
    display:inline-block;
    width:80px;
}
#menu>ul>li>a
{color:#fff;}
#menu>ul>li:hover
{background:#666;}

/* 下拉的菜单栏 */
#menu>ul>li ul
{
    display:none;
    width:150px;
    position:absolute;
    background:#c1cd94;
    box-shadow:2px 2px 2px #000;
    -webkit-box-shadow:2px 2px 2px #000;
    -moz-box-shadow:2px 2px 2px #123;
}
/* 下拉菜单的菜单项 */
#menu>ul>li>ul li
{padding-left:5px; position:relative;}
#menu>ul>li>ul li>a
{color:#000;}
#menu>ul>li>ul li:hover
{background:#d3dbb3;}

/* 三级及以下的菜单项的定位 */
#menu>ul>li>ul>li ul
{left:150px; top:0px;}

相比于之前的jQuery实现，各有优缺点。这个实现更加的精炼，不用那一大堆的JS代码以及加载那70多K的jQuery库。当然缺点也有不少：不能实现动画功能，也不能在IE(IE6下肯定不行，其它版本没试过)下运行。对目前国内的情况来说，这代码未没有多少的实用性。

有兴趣的朋友可去看一下演示程序。