html - CSS3 Accordion 菜单 3 级

标签 html css menu nav

有没有办法扩展这个 designmodo 示例以允许 3 级导航? 我非常想使用这个菜单示例,但我不知道如何添加第三级功能。任何帮助将不胜感激!

例子: http://designmodo.com/css3-accordion-menu/

这是我正在使用的 fiddle :http://jsfiddle.net/johnstonian/r5rEZ/

这是我正在使用的示例菜单:

<ul class="accordion">

        <li id="one" class="files">
          <a href="#one">My Files<span>495</span></a>
          <ul class="sub-menu">
            <li id="five">
                <a href="#one"><em>01</em>Dropbox<span>42</span></a>
                <ul class="sub-menu">
                    <li><a><em>01</em>3rd Level<span>9</span></a></li>
                    <li><a href="#five"><em>02</em>3rd Level<span>14</span></a></li>
                    <li><a href="#five"><em>03</em>3rd Level<span>3</span></a></li>
                </ul>
            </li>
            <li><a href="#one"><em>02</em>Skydrive<span>87</span></a></li>
            <li><a href="#one"><em>03</em>FTP Server<span>366</span></a></li>
              <li><a href="#one"><em>01</em>Dropbox<span>42</span></a></li>
          </ul>
        </li>

        <li id="two" class="mail">
          <a href="#two">Mail<span>26</span></a>
          <ul class="sub-menu">
            <li><a href="#two"><em>01</em>Hotmail<span>9</span></a></li>
            <li><a href="#two"><em>02</em>Yahoo<span>14</span></a></li>
            <li><a href="#two"><em>03</em>Gmail<span>3</span></a></li>
          </ul>
        </li>

        <li id="three" class="cloud">
          <a href="#three">Cloud<span>58</span></a>
          <ul class="sub-menu">
            <li><a href="#three"><em>01</em>Connect<span>12</span></a></li>
            <li><a href="#three"><em>02</em>Profiles<span>19</span></a></li>
            <li><a href="#three"><em>03</em>Options<span>27</span></a></li>
          </ul>
        </li>

        <li id="four" class="sign">
          <a href="#four">Sign Out</a>
          <ul class="sub-menu">
            <li><a href="#four"><em>01</em>Log Out</a></li>
            <li><a href="#four"><em>02</em>Delete Account</a></li>
            <li><a href="#four"><em>03</em>Freeze Account</a></li>
          </ul>
        </li>

      </ul>

最佳答案

关于html - CSS3 Accordion 菜单 3 级,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15392656/

相关文章:

javascript - Android原生分享菜单: Detect supporting browsers

html - 子标签不采用表格单元格父高度

javascript - .load() 后回调函数不执行点击

css - stroke-dashoffset 不适用于 SVG

html - 将背景应用于 flex 子项无法正常工作

css - 响应式菜单不显示我在移动版本中的所有下拉菜单

jquery垂直多级菜单parent li捕获内部ul的mouseclicks?

JQuery 菜单打开但随后消失

javascript - JQuery Image OnClick 添加边框

css - 键盘友好的 CSS 菜单