Create a pure PSD to CSS Dropdown menu in only a few steps with unlimited potential. Many websites have complex CSS menu systems which require more than a traditional single-level menu. CSS Dropdown menus can help a user to navigate to more sections of a website from a single entrance point.

Step 1: Design Your Menu

Your PSD to CSS dropdown menu design can be anything – go nuts! You are not limited to your creativity with your design, but there are a few design elements you must incorporate to generate a functional dropdown menu.

Note: CSS Dropdown menus can have 1 or more sub-menus attached to items.  This allows you to create complex navigations - but not too complex where you confuse the user!

We recommend you design your items first, then create your sub-menus as required per item.

Menu Items

Each menu item is normally a button or link text element. You want all buttons in our menu to reflect the same design in your PSD, this will allow you to better control all buttons with CSS classes in the output.

Note: A button will typically have a label and a background (bg) element.

Sub-Menu

Your sub-menu will have a secondary list of menu items. You can design your sub-menu in the PSD to look the same or different from the main menu items – it’s up to you. It’s important though to note where you place the sub-menu in your Photoshop layers.

Sub-menus should be designed in such a way that the user does not have to move their mouse too far from the menu item, to navigate the sub-menu items.

Note: You should always place sub-menus as children of their parent item in your PSD design.

Step 2: Define Your CSS Layer Style

Next we want to customize the look and feel of our menu. To do this we Create Custom CSS Styles to use with our menu items. The PSD to CSS styles we create will “tell” our element (eg. button) how to display, and what to display based on view states; eg. hover or active.

We suggest you create your CSS Style for each layer in your design first.

Sub Styles

Export Kit has a very powerful PSD to CSS engine so you can create unlimited PSD to CSS targeted styles which can apply to any or specific elements in your output. You should always create sub styles for your classes to keep them organized.

Assume we have 3 menu items:

• ${css|style:item} item1
• ${css|style:item} item2
• ${css|style:item} item3

The very first style you would naturally apply is an item style. To create sub styles, you go in more detail with your nesting, eg:

• ${css|style:item item1} item1
• ${css|style:item item2} item2
• ${css|style:item item3} item3

Doing this will allow you to have greater control with your CSS Styles Folder elments. You can then render CSS styles for item as a group, or individually to each; item1, item2, item3.

Note: Because each item also has children (label and bg), you can now directly target children element also; eg. item2>>label.

Step 3: Create Custom CSS Classes

Your CSS Styles Folder in your PSD may end up with a lot of styles defined – this is normal. The more you define your PSD to CSS classes, the more you can personalize your output to meet your creative requirements.

Menu Item CSS Styles

You can control the children element of item with our CSS class nesting. Because your elements for label and bg are within the item folder, these styles will now target directly child elements; eg. item>>label.

Using CSS selectors, you can also add styles for states such as :hover or :active. Child layers you add in any selector folder will only apply to that CSS layer query.

Eg. In this example we want the menu item background to be white, but change to dark blue when the user hovers.

Sub-menu Item CSS Styles

Because you added an individual style to the submenu in the PSD, you can now control each child element independently, but also have a parent child CSS relationship. This means that submenu styles will inherit item styles when rendering.

Eg. We want an item in the submenu to have a dark blue background, but change to light blue when the user hovers.

CSS Dropdown Logic

This is assuming you are using Sub Styles such as:
${css|style:item item2}
${css|style:submenu submenu2}

When you enable Hidden Layers in your output, you open your PSD to CSS capabilities to include elements which will only become visible under your custom circumstances.

You can use this logic to create multiple nested menus.

Hide the Submenu by Default

You dont want your submenu to be visible unless the user hovers over item2. So your submenu is not visible by default, therefor you hide the folder submenu in our CSS Styles Folder.

Show the Submenu on Rollover

To show the submenu when the user hovers over item2, we can simply make the folder visible in our CSS Styles Folder.