Install Multi Level CSS Dropdown Menu

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.



The HTML

Below is theHTML code for the menu. You want to copy the HTML and paste it into aHTML/Javascript gadget. Then reposition the gadget below the header.If you don’t know how to add a page element under the header then Isuggest you read Creating navigation or menu tabs in Blogger first.

001	<!-- Dropdown menu Start -->

002	<div id="menu">

003	<ul class="level1">

004	<li class="level1-li"><a class="level1-a" href="#url">Home</a></li>

005	<li class="level1-li"><a class="level1-a fly" href="#url">Contact Us<!--[if gte IE 7]><!--></a><!--<![endif]-->

006	<!--[if lte IE 6]><table><tr><td><![endif]-->

007	<ul class="level2">

008	<li><a href="#url">Email</a></li>

009	<li><a href="#url">Telephone</a></li>

010	<li><a href="#url">Online Form</a></li>

011	<li><a href="#url">Snail Mail Address</a></li>

012

</ul>

013	<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>

014	<li class="level1-li"><a class="level1-a fly" href="#url">Resort<!--[if gte IE 7]><!--></a><!--<![endif]-->

015	<!--[if lte IE 6]><table><tr><td><![endif]-->

016	<ul class="level2">

017	<li><a href="#url">Ski Hire Facilities</a></li>

018	<li><a class="fly" href="#url">Main Ski Slopes<!--[if gte IE 7]><!--></a><!--<![endif]-->

019	<!--[if lte IE 6]><table><tr><td><![endif]-->

020	<ul class="level3">

021	<li><a href="#url">Beginners Slopes</a></li>

022	<li><a href="#url">Intermediate Slopes</a></li>

023	<li><a class="fly" href="#url">Advanced Skill Levels<!--[if gte IE 7]><!--></a><!--<![endif]-->

024	<!--[if lte IE 6]><table><tr><td><![endif]-->

025	<ul class="level4">

026	<li><a href="#url">Local</a></li>

027	<li><a href="#url">Nearby</a></li>

028	<li><a href="#url">With instructor</a></li>

029	<li><a href="#url">Snow boarding</a></li>

030

</ul>

031	<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>

032	<li><a href="#url">Expert</a></li>

033

</ul>

034	<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>

035	<li><a href="#url">Night Life</a></li>

036	<li><a class="fly" href="#url">Restaurants<!--[if gte IE 7]><!--></a><!--<![endif]-->

037	<!--[if lte IE 6]><table><tr><td><![endif]-->

038	<ul class="level3">

039	<li><a href="#url">Snow Hotel</a></li>

040	<li><a href="#url">The Snowman</a></li>

041	<li><a href="#url">Ice Cavern</a></li>

042	<li><a href="#url">Ski Inn</a></li>

043

</ul>

044	<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>

045	<li><a class="fly" href="#url">Car Hire<!--[if gte IE 7]><!--></a><!--<![endif]-->

046	<!--[if lte IE 6]><table><tr><td><![endif]-->

047	<ul class="level3">

048	<li><a href="#url">From Airport</a></li>

049	<li><a href="#url">In Resort</a></li>

050	<li><a href="#url">Multiple Resorts</a></li>

051

</ul>

052	<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>

053

</ul>

054	<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>

055	<li class="level1-li"><a class="level1-a fly" href="#url">Surrounding Area<!--[if gte IE 7]><!--></a><!--<![endif]-->

056	<!--[if lte IE 6]><table><tr><td><![endif]-->

057	<ul class="level2">

058	<li><a href="#url">Where to go</a></li>

059	<li><a href="#url">What to do</a></li>

060	<li><a href="#url">Places of interest</a></li>

061	<li><a href="#url">National parks &amp; Museums</a></li>

062

</ul>

063	<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>

064	<li class="level1-li left"><a class="level1-a fly" href="#url">Information<!--[if gte IE 7]><!--></a><!--<![endif]-->

065	<!--[if lte IE 6]><table><tr><td><![endif]-->

066	<ul class="level2">

067	<li><a href="#url">Money Exchange</a></li>

068	<li><a class="fly" href="#url">Resort Essential Information<!--[if gte IE 7]><!--></a><!--<![endif]-->

069	<!--[if lte IE 6]><table><tr><td><![endif]-->

070	<ul class="level3">

071	<li><a href="#url">Lift Passes</a></li>

072	<li><a href="#url">Insurance</a></li>

073	<li><a class="fly" href="#url">Gear Rental<!--[if gte IE 7]><!--></a><!--<![endif]-->

074	<!--[if lte IE 6]><table><tr><td><![endif]-->

075	<ul class="level4">

076	<li><a href="#url">Boots</a></li>

077	<li><a href="#url">Skis</a></li>

078	<li><a href="#url">Ski Wear</a></li>

079	<li><a href="#url">Goggles</a></li>

080

</ul>

081	<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>

082	<li><a href="#url">Ski Schools</a></li>

083	<li><a href="#url">Snow Report</a></li>

084

</ul>

085	<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>

086	<li><a class="fly" href="#url">Language<!--[if gte IE 7]><!--></a><!--<![endif]-->

087	<!--[if lte IE 6]><table><tr><td><![endif]-->

088	<ul class="level3">

089	<li><a href="#url">Austrian</a></li>

090	<li><a href="#url">German</a></li>

091	<li><a href="#url">French</a></li>

092	<li><a href="#url">English</a></li>

093

</ul>

094	<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>

095	<li><a href="#url">Short Breaks</a></li>

096

</ul>

097	<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>

098	<li class="level1-li"><a class="level1-a" href="#url">Privacy</a></li>

099

</ul>

100

</div>

101	<!-- BloggerSentral.blogspot.com -->

102	<!-- Dropdown menu End -->

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 </ul>.


• A tab starts with <li> and ends with </li>.

Makesure you add/remove the relevant code completely i.e. starting from theopening tag until closing tag. Do the changes carefully.

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

 



The CSS

Copy and paste the code below right before ]]></b:skin> line in your template code.

01	/* ================================================================

02	Thiscopyright notice must be kept untouched in the stylesheet at all times.The original version of this stylesheet and the associated (x)html isavailable at http://www.cssplay.co.uk/menus/anywidth2.html

03	Copyright(c) 2005-2009 Stu Nicholls. All rights reserved. This stylesheet andthe associated (x)html may be modified in any way to fit yourrequirements.

04	=================================================================== */

05	#menu {width:740px; background: #3aa3d3; height:25px;; text-align:center; position:relative; z-index:500;}

06	#menu ul {margin:0; padding:0; list-style:none; white-space:nowrap; text-align:left;}

07	#menu ul {display:inline-block;}

08	#menu li {margin:0; padding:0; list-style:none;}

09	#menu li {display:inline-block; display:inline;}

10	#menu ul ul {position:absolute; left:-9999px;}

11	#menu ul.level1 {margin:0 auto; background:#710;}

12	#menu ul.level1 li.level1-li {float:left; display:block; position:relative;}

13	#menu ul.level1 {background:#3aa3d3;}

14	#menu ul.level2 {background:#ae4621;}

15	#menu ul.level3 {background:#c98b14;}

16	#menu ul.level4 {background:#9f690e;}

17	#menu b {position:absolute;} /* -- for IE6 non-flyout dropdowns to stop flickering - who knows why --*/

18	#menu a {display:block; font:normal 11px verdana,arial,sans-serif; color:#fff; line-height:25px; text-decoration:none;padding:0 20px 0 10px;}

19	#menu ul.level1 li.level1-li a.level1-a {float:left;}

20	#menu ul li:hover > ul {visibility:visible; left:0; top:25px;}

21	#menu ul ul li:hover > ul {visibility:visible; left:100%; top:auto; margin-top:-25px;}

22	#menu li.left:hover > ul {visibility:visible; left:auto; right:0; top:25px;}

23	#menu li.left ul li:hover > ul {visibility:visible; left:auto; right:100%; top:auto; margin-top:-25px;}

24	#menu a:hover ul {left:0; top:23px;}

25	#menu li.left a:hover ul {left:auto; right:-1px; top:23px;}

26	#menu li.left ul a {text-align:right; padding:0 10px 0 20px;}

27	#menu a:hover a:hover ul,

28	#menu a:hover a:hover a:hover ul {left:100%; visibility:visible;}

29	#menu li.left a:hover a:hover ul,

30	#menu li.left a:hover a:hover a:hover ul {left:auto; right:0; visibility:visible;}

31	#menu a:hover ul ul,

32	#menu a:hover a:hover ul ul {left:-9999px;}

33	#menu li.left a:hover ul ul,

34	#menu li.left a:hover a:hover ul ul {left:-9999px;}

35	#menu li a.fly {font-variant: small-caps;}

36	#menu li.left ul a.fly {font-variant: small-caps;}

37	#menu li a:hover,

38	#menu li a.fly:hover {background-color:#555555;}

39	#menu li:hover > a,

40	#menu ul li:hover > a.fly {background-color:#555555;}

41	#menu table {position:absolute; height:0; width:0; left:0; border-collapse:collapse; margin-top:-4px;}

42	#menu table table {position:absolute; left:99%; height:0; width:0; border-collapse:collapse; margin-top:-29px;}

43	#menu li.left table {position:absolute; height:0; width:0; left:auto; right:0; border-collapse:collapse; margin-top:-4px;}

44	#menu li.left table table {position:absolute; left:auto; right:100%; height:0; width:0; border-collapse:collapse; margin-top:-29px;}

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.





Good luck!