Home/ Questions/Q 8653349
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-12T14:31:13+00:00

I am trying to create a dropdown menu on the navigation bar in Magento.

  • 0

I am trying to create a dropdown menu on the navigation bar in Magento.
As you will see in my code all dropdown menu’s collapse when i hover over one of the list items. But i can’t figure out how to make only the correct one appear without making a hover function for each li and that seems like a non-effective way to reach my goal.

So i was hoping you guys could help me out 🙂

This is what i have so far:

HTML:

<div class="navigation-bar">
<ul class="mainLevel">
    <li class="navLink mainCategory1"><a href="http://fabriqmagento.development.cream.nl/new-in.html" class="level-top"><span>New in</span></a></li>
    <li class="listSeperator">|</li>
    <li class="navLink mainCategory2"><a href="http://fabriqmagento.development.cream.nl/merken.html" class="level-top"><span>Merken</span></a>
        <ul class="level0">
            <li class="navLink mainCategory1"><a href="http://fabriqmagento.development.cream.nl/merken/diesel.html"><span>Diesel</span></a></li>
            <li class="listSeperator"></li>
            <li class="navLink mainCategory2"><a href="http://fabriqmagento.development.cream.nl/merken/becksondergaard.html"><span>Becksondergaard</span></a></li>
            <li class="listSeperator"></li>
        </ul>
    </li>
    <li class="listSeperator">|</li>
    <li class="navLink mainCategory3"><a href="http://fabriqmagento.development.cream.nl/categorie.html" class="level-top"><span>Categorie</span></a></li>
    <li class="listSeperator">|</li>
    <li class="navLink mainCategory4"><a href="http://fabriqmagento.development.cream.nl/tassen.html" class="level-top"><span>Tassen</span></a></li>
    <li class="listSeperator">|</li>
    <li class="navLink mainCategory5"><a href="http://fabriqmagento.development.cream.nl/accessoires.html" class="level-top"><span>Accessoires</span></a></li>
    <li class="listSeperator">|</li>
    <li class="navLink mainCategory6"><a href="http://fabriqmagento.development.cream.nl/jeans.html" class="level-top"><span>Jeans</span></a></li>
    <li class="listSeperator">|</li>
    <li class="navLink mainCategory7"><a href="http://fabriqmagento.development.cream.nl/outlet.html" class="level-top"><span>Outlet</span></a></li>
    <li class="listSeperator">|</li>
</ul>
</div>

css:

ul.level0{ display:none;}

jQuery:

(function(window, $, undefined) {

    jQuery(function(){
        $('li.navLink').hover(function(){
            $('ul.level0').show();
        }, function(){
            $('ul.level0').hide();
        })
    });

})(window, jQuery);
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You just needed a couple of changes to the script…

    http://jsfiddle.net/8846T/

    (function($) {

    jQuery(function(){
        $('li.navLink').hover(function(){
            $('ul.level0').hide();
            $(this).find('ul.level0').show();
        }, function(){
            $('ul.level0').hide();
        })
    });

})(jQuery);

    I made it hide all level0 ul elements on hover, and then show the child level0 ul element of the hovered li.

    I also removed a little bit of code from your function call as it was not needed 🙂

    • 0