On occasion this time I will explain how to create and install a multi-level css dropdown menu. This is a multi level dropdown / flyout menu from CSSPlay.This four level dropdown/flyout menu should work in most browsers. Atab with small caps indicates it has upper level/levels. Adropdown/flyout will appear when you hover the tab.
Asyou can see, the dropdown menu is made up of unordered lists (ul) andlist items (li). The menu bar (and columns in dropdown) are made up ofunordered list and the tabs are made up of list items.
Replace the tab texts and link urls with your own. You may delete or add submenus (up to 4 levels) and tabs.
- A menu bar/column starts with
<ul>and ends with
- A tab starts with
<li>and ends with
Thestyling is done using CSS (Cascading Style Sheet). The thing that linksHTML and CSS is classes that are added inside HTML tags.
The class names used in this project are explained below. Please follow the class names when making changes to the menu.
|Class name ||Description |
|level1 ||Used in level 1 ul tag |
|level2 ||Used in level 2 ul tag |
|level3 ||Used in level 3 ul tag |
|level4 ||Used in level 4 ul tag |
|level1-li ||Used in level 1 li tag with right or no dropdown |
|level1-li left ||Used in level 1 li tag with left dropdown |
|level1-a ||Used in level 1 li a tag for tabs with no dropdown |
|level1-a fly ||Used in level 1 li a tag for tabs with dropdown |
|fly ||Used in li a tag for tabs (other than level 1)with flyout |
Copy and paste the code below right before ]]></b:skin> line in your template code.
Change the width in line 5 to match your header width.
To change the background color of each level, simply replace the color hex code in lines 13 to 16 with new ones.
I use small caps on tabs with upper levels, you can change that in line 35 and 36.