CSS3 меню аккордеона 3 уровня

Есть ли способ расширить этот пример designmodo, чтобы обеспечить 3 уровня навигации? Я бы очень хотел использовать этот пример меню, но я не могу понять, как добавить третий уровень функциональности. Любая помощь будет принята с благодарностью!CSS3 меню аккордеона 3 уровня

Пример: http://designmodo.com/css3-accordion-menu/

Вот скрипка, что я работаю с: 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>

источник

2013-03-13 Johnstonian

Какие проблемы вы с? – Nix

У вас нет меню 3-го уровня в вашем HTML ... – Shmiddty

У меня проблема с отображением элементов ul/li 3-го уровня. пытаясь выяснить, как изменить css, чтобы использовать таргетинг 3-го уровня с использованием метода pseudo: target. Вот скрипка: http://jsfiddle.net/johnstonian/r5rEZ/ Что бы я хотел, это показать список предметов под «Dropbox» при нажатии – Johnstonian

CSS3 меню аккордеона 3 уровня

ответ

Смежные вопросы