Dropdown Menu About

Question

I want to do a dropdown menu. Cover a distance. But I have a problem. When I click the product menu and opening menu after product menu with the open, click the references menu opening. But click the both menu it can be break down. This problem because of Javascript. Below I share my code also Html and Javascript. I wait for your help.

--- HTML ---

<div class="cbp-hsinner">
    <ol class="parent">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li>
            <a href="#">Product</a>
            <ol class="child">
                <li>
                    <a href="#">
                        <img src="img/logom.jpg" alt="img01" />
                        <span>Delicate Wine</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="img/2.png" alt="img02" />
                        <span>Fine Spirit</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="img/3.png" alt="img03" />
                        <span>Heavenly Ale</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="img/4.png" alt="img04" />
                        <span>Juicy Lemonade</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="img/5.png" alt="img05" />
                        <span>Wise Whiskey</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="img/6.png" alt="img06" />
                        <span>Sweet Rum</span>
                    </a>
                </li>

            </ol>
        </li>

        <li>
            <a href="#">References</a>
            <ol class="child">
                <li>
                    <a href="#">
                        <img src="img/1.png" alt="img01" />
                        <span>Delicate Wine</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="img/2.png" alt="img02" />
                        <span>Fine Spirit</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="img/3.png" alt="img03" />
                        <span>Heavenly Ale</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="img/4.png" alt="img04" />
                        <span>Juicy Lemonade</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="img/5.png" alt="img05" />
                        <span>Wise Whiskey</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="img/6.png" alt="img06" />
                        <span>Sweet Rum</span>
                    </a>
                </li>
            </ol>
        </li>
        <li><a href="#">Contact</a></li>
    </ol>
</div>

--- JavaScript ---

    $('.child').hide();
    $('.parent > li > a').click(function () {         
        $(this).parent().find('.child').slideToggle('slow');
    });

Answer 1

You have to hide all menu before opening a menu. You can use this code.

$('.child').hide();
$('.parent > li > a').click(function () {      
    $('.parent').find('.child').hide(); // this will hide menu
    $(this).parent().find('.child').slideToggle('slow');
});