web前端入门到实战：CSS多级菜单

这是一个相当炫的功能，让网页看起来像桌面程序，如window的开始菜单。实现原理基本和纯CSS相册差不多，但要注意的事项比较多，让我们一步步来吧。

先来一个非常简单的一级菜单与悬停效果。

<ul id="menu">
  <li>
    <a href="http://www.cnblogs.com/rubylouvre/">
      菜单一<!--小图--><span><!--大图--></span>
    </a>
  </li>
  <li>
    <a href="http://www.cnblogs.com/rubylouvre/">
      菜单二<!--小图--><span><!--大图--></span>
    </a>
  </li>
  <li>
    <a href="http://www.cnblogs.com/rubylouvre/">
      菜单三<!--小图--><span><!--大图--></span>
    </a>
  </li>
  <li class="last">
    <a href="http://www.cnblogs.com/rubylouvre/">
      菜单四<!--小图--><span><!--大图--></span>
    </a>
  </li>
</ul>

结构很熟悉吧，就是把原来放图片的地方换成文字而已。我还特意标出来了。接着下来的表现层代码非常简单。