纯CSS下拉导航菜单三级导航

一款纯CSS下拉导航菜单三级导航特效，点击菜单会显示多个二级菜单，其中有箭头的则表示有三级菜单，可继续点击展开，展开之后需要手动点击收缩恢复到最初状态，喜欢的童鞋请收下吧。

分类：导航菜单 > 下拉导航难易：初级

查看演示下载资源下载积分： 20 积分

页面的head部分，仅需引入一个CSS样式文件即可，代码如下：

<link type="text/css" rel="stylesheet" href="css/style.css">

页面的body部分，设置好页面各元素的容器，可根据不同菜单级别进行增加，代码如下：

<main ontouchstart='true' role='main'>
  <nav role='menu'>
    <input aria-controls='nav' aria-haspopup='true' aria-labelledby='menu' id='link-top' role='button' tabindex='1' type='checkbox'>
    <label class='down' for='link-top' id='menu' role='none' tabindex='-1'>吸引力法则</label>
    <ul aria-labelledby='menu' id='nav' role='menu'>
      <li role='none'>
        <input aria-controls='nest' aria-haspopup='true' aria-labelledby='shop' id='link-shop' role='menuitem' tabindex='2' type='checkbox'>
        <label class='right' for='link-shop' id='shop' role='none' tabindex='-1'>健康</label>
        <ul aria-labelledby='shop' id='nest' role='menu'>
          <li role='none'>
            <a role='menuitem' tabindex='3'>运动</a>
          </li>
          <li role='none'>
            <a role='menuitem' tabindex='3'>营养</a>
          </li>
          <li role='none'>
            <a role='menuitem' tabindex='3'>睡眠</a>
          </li>
          <li role='none'>
            <a role='menuitem' tabindex='3'>水分</a>
          </li>
          <li role='none'>
            <a role='menuitem' tabindex='3'>放松</a>
          </li>
        </ul>
      </li>
      <li role='none'>
        <a role='menuitem' tabindex='4'>快乐</a>
      </li>
      <li role='none'>
        <a role='menuitem' tabindex='4'>财富</a>
      </li>
      <li role='none'>
        <a role='menuitem' tabindex='4'>自由</a>
      </li>
    </ul>
  </nav>
</main>

纯CSS下拉导航菜单三级导航【原创】

页面的head部分，仅需引入一个CSS样式文件即可，代码如下：

页面的body部分，设置好页面各元素的容器，可根据不同菜单级别进行增加，代码如下：