How to create a vertical navigation menu with 3rd level?

Question

I have a problem with my navigation menu. I have an array like this:

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
                                        )

                                )

                        )

                )

        )

And I want to created a navigation menu that have a third level. In my code I have this:

<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>

If to show the second level of the array I don't have a problem but with displaying the third level I have an error. Whenever I hover to the third level and go to other links. It doesn't show the category.

Here's my function for display and hiding the category:

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();
}

Here's the fiddle of my work:

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

Answer 1

You can do multilevel menu only with html & css. Here is the example fiddle: http://jsfiddle.net/uwuzbsrx/