CSS file structure

After generating a CSS menu in your site using MX CSS Menus, you will notice in the \includes\cssmenus2\skins site folder a folder named as the selected skin. It contains an images directory and four .css files, one for each of the four possible layouts.

Open one of the four .css files, and take a look at its structure. Notice the clear and precise comments that guide you in understanding how the skin was created. This is the general structure of the .css files, separated in sections:

  1. Skin style definition.

  2. Selected items.

  3. Mouse-hovered items.

  4. Parent items behavior (there is an arrow that indicates that a menu item has sub-items).

  5. Layout style definition.

Check for yourself one of the generated .css files, for example \includes\cssmenus2\skins\arktic_blue\vertical.css. Notice all the CSS classes defined in the first four sections. The cascaded definition manner is very visible. For example, the .arktic_blue ul li.selected class sets properties for the menu items on the 2nd, 3rd, etc. levels, when they are selected.