CSS Menu Layout

1. Full width, left aligned
2. Full width, right aligned
3. Full width, first menu item starts from a certain position
4. Full width, center aligned
5. Adaptive width, left aligned
6. Adaptive width, right aligned
7. Adaptive width, has a left margin
8. Adaptive width, center aligned

The CSS code needs to be changed slightly for different layouts, as shown below.
Note:Some alignment/layout needs additional Javascript file that you will find in the source code section below.

Menu Alignment, Menu Layout and width

To acquire different menu alignment and layout, we need to change the CSS settings. In some cases you may need to update HTML code, or even add Javascript.

The following is the source code for the selected menu alignment/layout.

CSS

.menuTemplate3 { margin:0; width:100%; float:none; ... (other styles of the .menuTemplate3 class) ... }

Above is the updated part of the code. Please refer to Css Menu or CSS Drop Down Menu for the original code.

▲