Creating a dropdown menu for categories
Use this code to create drop down menus for category navigation.

These are the steps to add personalized CSS code to the design:

1. Navigate to Settings > Layout > Designer and launch the designer
2. Click Preferences (last icon) and enable Advanced
3. Click Customize CSS (penultimate icon)
4. Add the piece of CSS code at the bottom (copy and paste)

Publish the design (first icon in the designer window) to make sure the result is live.

The CSS code to create a category dropdown menu:

#cat > ul li:hover > ul {
    opacity: 1; max-height: 100%;
}

Note that in Settings > Webshop Settings, "Display Number of Category Levels" must be set to "2 - Detailed".

This can also be added to give the drop down menu a background color:

#cat > ul ul {
    background: #1176ae;
}

And this code to make sure it doesn't work on screens less than 600 pixels wide:

@media all and (max-width: 600px) {
    #cat > ul li:hover > ul { max-height: 0; }
}

If the category navigation becomes too wide, it will be displayed on multiple lines. Usually the dropdown menus are then confusing. So it is best not to make the category navigation too long or add the last code for situations when the screen becomes too narrow. The 600px in the above example can be adjusted for this purpose according to the width of the category menu.