纯CSS实现下拉菜单及下拉容器等（纯CSS实现导航条及导航下拉容器）

虽然网上类似甚至相同的案例有很多，但是我还是写下，以记下笔记，也可供大家参考

希望大家可以指导批评~~

首先我们以列表ul li 来开始我们菜单也可以说导航条的制作：

在页面中我们首先构建以下XHTML结构：

<body>
  <ul id="navWrapper">
    <li>
      <a href="#">Menu A</a>
      <ul>
        <li><a href="#">Menu A, Item 1</a></li>
        <li><a href="#">Menu A, Item 2</a></li>
        <li><a href="#">Menu A, Item 3</a></li>
        <li><a href="#">Menu A, Item 4</a></li>
        <li><a href="#">Menu A, Item 5</a></li>
        <li><a href="#">Menu A, Item 6</a></li>
      </ul>
    </li>
    <li>
      <a href="#">Menu B</a>
      <div id="test"><a href="#">Menu B, Item 1</a></div>
    </li>
  </ul>
  <div id="banner"></div>
  <div id="content">
    <p>Page content here.</p>
  </div>
</body>

View Code