CSS多级嵌套下拉式导航菜单特效代码（支持水平和垂直方向）

演示  website 下载

纯html和css/css3编写的下拉列表嵌套（无序）菜单,利于搜索引擎优化。支持水平和垂直方向。

使用方法：

1.在html页面中引入pure-css-navigation.css样式文件。

<link rel="stylesheet" href="./pure-css-navigation.css" />

2.用"pure-css-nav"CSS类将nav列表包装到一个DIV容器中。

<div class="pure-css-nav">
  <nav>
    <ul>
      <li><a href="">Home</a></li>
      <li>
        <a href="">About Us</a>
        <ul>
          <li><a href="">Sub #1</a></li>
          <li>
            <a href="">Sub #2</a>
            <ul>
              <li><a href="">Sub #2.1</a></li>
              <li>
                <a href="">Sub #2.2</a>
                <ul>
                  <li><a href="">Sub #3.1</a></li>
                  <li><a href="">Sub #3.2</a></li>
                  <li><a href="">Sub #3.3</a></li>
                </ul>
              </li>
              <li><a href="">Sub #2.3</a></li>
            </ul>
          </li>
          <li><a href="">Sub #3</a></li>
        </ul>
      </li>
      <li>
        <a href="">Portfolio</a>
        <ul>
          <li><a href="">No Children</a></li>
          <li>
            <a href="">1 Child - dlfjkhs adljkfh slakdj </a>
            <ul>
              <li><a href="">Child #1</a></li>
            </ul>
          </li>
          <li>
            <a href="">2 Children</a>
            <ul>
              <li><a href="">Child #1</a></li>
              <li><a href="">Child #2</a></li>
            </ul>
          </li>
          <li>
            <a href="">3 Children</a>
            <ul>
              <li><a href="">Child #1</a></li>
              <li><a href="">Child #2</a></li>
              <li>
                <a href="">Child #3</a>
                <ul>
                  <li><a href="">Child #1</a></li>
                  <li><a href="">Child #2</a></li>
                  <li>
                    <a href="">Child #3</a>
                    <ul>
                      <li><a href="">Child #1</a></li>
                      <li><a href="">Child #2</a></li>
                      <li>
                        <a href="">Child #3</a>
                        <ul>
                          <li><a href="">Child #1</a></li>
                          <li><a href="">Child #2</a></li>
                          <li><a href="">Child #3</a></li>
                        </ul>
                      </li>
                    </ul>
                  </li>
                </ul>
              </li>
            </ul>
          </li>
        </ul>
      </li>
      <li><a href="">Services</a></li>
      <li><a href="">Events</a></li>
      <li><a href="">Blog</a></li>
      <li><a href="">Careers</a></li>
      <li><a href="">Contact Us</a></li>
    </ul>
  </nav>
</div>

3.使用字体Awesome图标字体作为下拉式插入符号。

<link rel="stylesheet" href="/path/to/cdn/font-awesome.min.css" />
<div class="pure-css-nav nav-font-icons">  <nav>    ...  </nav></div>

4.设置顶级菜单项的宽度相等。

<div class="pure-css-nav nav-justified">
  <nav>
    ...
  </nav>
</div>

5.设置垂直方向菜单。

<div class="pure-css-nav nav-vertical">
  <nav>
    ...
  </nav>
</div>

会员登陆后即可下载资源文件。更多好用网站特效插件，请关注帝国模板之家。