Как создать вертикальное меню навигации с 3-го уровня?

Question

У меня проблема с моим меню навигации. У меня есть массив вроде этого:

Array 
(
    [0] => Array 
     (
      [category_id] => 67 
      [name] => Mobiles & Tablets 
      [href] => http://localhost/ecommerce/index.php?route=product/category&path=67 
      [sub_category] => Array 
       (
        [0] => Array 
         (
          [category_id] => 80 
          [name] => Mobiles 
          [href] => http://localhost/ecommerce/index.php?route=product/category&path=67_80 
          [sub_category] => Array 
           (
            [0] => Array 
             (
              [category_id] => 82 
              [name] => Smartphones 
              [href] => http://localhost/ecommerce/index.php?route=product/category&path=67_80_82 
             ) 

            [1] => Array 
             (
              [category_id] => 83 
              [name] => Basic Phones 
              [href] => http://localhost/ecommerce/index.php?route=product/category&path=67_80_83 
             ) 

            [2] => Array 
             (
              [category_id] => 84 
              [name] => Mobile Accessories 
              [href] => http://localhost/ecommerce/index.php?route=product/category&path=67_80_84 
             ) 

            [3] => Array 
             (
              [category_id] => 85 
              [name] => Power Banks 
              [href] => http://localhost/ecommerce/index.php?route=product/category&path=67_80_85 
             ) 

            [4] => Array 
             (
              [category_id] => 86 
              [name] => Mobile Broadband 
              [href] => http://localhost/ecommerce/index.php?route=product/category&path=67_80_86 
             ) 

           ) 

         ) 

        [1] => Array 
         (
          [category_id] => 81 
          [name] => Tablets 
          [href] => http://localhost/ecommerce/index.php?route=product/category&path=67_81 
          [sub_category] => Array 
           (
            [0] => Array 
             (
              [category_id] => 87 
              [name] => Tablets with Call Facility 
              [href] => http://localhost/ecommerce/index.php?route=product/category&path=67_81_87 
             ) 

            [1] => Array 
             (
              [category_id] => 88 
              [name] => Tablets without Call Facility 
              [href] => http://localhost/ecommerce/index.php?route=product/category&path=67_81_88 
             ) 

            [2] => Array 
             (
              [category_id] => 89 
              [name] => Tablet Accessories 
              [href] => http://localhost/ecommerce/index.php?route=product/category&path=67_81_89 
             ) 

           ) 

         ) 

       ) 

     ) 

И я хочу создать меню навигации, имеющее третий уровень. В моем коде я это:

<div class="index_categories_section"> 
    <h4>CATEGORY</h4> 
    <nav> 
     <ul class="list-unstyled"> 

     <?php if($main_category) { ?> 

      <?php foreach($main_category as $keys => $values) { ?> 

       <li class="cat_list" onmouseover="displayOptions(<?php echo $keys; ?>);" onmouseout="hideOptions(<?php echo $keys; ?>);"> 
        <a href="<?php echo $values['href']; ?>"><?php echo $values['name']; ?></a> 

        <?php if(!empty($values['sub_category'])) { ?> 

         <span class="pull-right"><i class="fa fa-chevron-right"></i></span> 

         <div id="choice-<?php echo $keys; ?>" class="choices"> 

          <?php foreach($values['sub_category'] as $scd_lvl_keys => $scd_lvl_values) { ?> 

           <a href="<?php echo $scd_lvl_values['href']; ?>" onmouseover="subDisplayOptions(<?php echo $scd_lvl_keys; ?>);" onmouseout="hideOptions(<?php echo $scd_lvl_keys; ?>);"> 

            <div class="list_links"> 

             <?php echo $scd_lvl_values['name']; ?> 

             <?php if(!empty($scd_lvl_values['sub_category'])) { ?> 

              <span class="pull-right"><i class="fa fa-chevron-right"></i></span> 

              <div id="sub-choice-<?php echo $scd_lvl_keys; ?>" class="sub_choices" onmouseout="subHideOptions(<?php echo $scd_lvl_keys; ?>);"> 

               <?php foreach($scd_lvl_values['sub_category'] as $thrd_lvl_keys => $thrd_lvl_values) { ?> 
                <a href="<?php echo $thrd_lvl_values['href']; ?>"><?php echo $thrd_lvl_values['name']; ?></a> 
               <?php } ?> 

              </div> 

             <?php } ?> 

            </div> 

           </a> 

          <?php } ?> 

         </div> 

        <?php } ?> 
       </li> 

      <?php } ?> 
     <?php } else { ?> 
      <p class="text-center required">No Category Set</p> 
     <?php } ?> 


     </ul> 
    </nav> 
    <div class="row"> 
     <div class="col-xs-12" id="more-categories"> 
      <a href="<?php echo $category_list; ?>" class="pull-right">View Category list <i class="fa fa-play"></i></a> 
      <div class="clearfix"></div> 
     </div> 
    </div> 
</div> 

Если показать второй уровень массива У меня нет проблемы, но с отображением третьего уровня у меня есть ошибка. Всякий раз, когда я нахожусь на третьем уровне и перехожу к другим ссылкам. Он не показывает категорию.

Вот моя функция для отображения и скрытия категории:

function displayOptions(id) { 
    $("#choice-" + id).show(); 
} 

function hideOptions(id) { 
    $("#choice-" + id).hide(); 
} 

function subDisplayOptions(id) { 
    $("#sub-choice-" + id).show(); 
} 

function subHideOptions(id) { 
    $("#sub-choice-" + id).hide(); 
} 

Вот скрипка моей работы:

http://jsfiddle.net/rochellecanale/pctgp9on/4/

Answer 1

Вы можете сделать многоуровневое меню только с html & css. Вот пример скрипки: http://jsfiddle.net/uwuzbsrx/