div.multi_drop_menus * { margin:0; padding:0; /* Removes margin and padding off all list elements. */ } div.multi_drop_menus { behavior:url(/java/csshover.htc); font-family : "arial",Helvetica Neue,helvetica,sans-serif; /*font-family:arial, sans-serif;*/ text-shadow : 0em -1px .0em #111; /* Required for IE6. */ font-size:1.0em; /* Size of menu's type relative to parent element. */ font-weight:bold; margin:0px 0 10px 0px; background-color:transparent; /* Colors the div - fills horizontal menu parent. */ /* Set to background-color:transparent; if not needed. */ } div.multi_drop_menus ul { border-left:1px solid #ccB; /* Creates dividing line to left of level 1's first */ /* menu item, revealing div color to left of menu. */ display:inline; /* Fixes margin-doubling bug in IE6. */ /* background-color:#FF3333;*/ /* Background color of hovered menu items. */ background-color:#63728F; /* 8B939C; */ } div.multi_drop_menus li { background: #63728F; background-image: linear-gradient(bottom, #3D4E6C 31%, #63728F 66%, #8D9CB9 83%); background-image: -o-linear-gradient(bottom, #3D4E6C 31%, #63728F 66%, #8D9CB9 83%); background-image: -moz-linear-gradient(bottom, #3D4E6C 31%, #63728F 66%, #8D9CB9 83%); background-image: -webkit-linear-gradient(bottom, #3D4E6C 31%, #63728F 66%, #8D9CB9 83%); background-image: -ms-linear-gradient(bottom, #3D4E6C 31%, #63728F 66%, #8D9CB9 83%); background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.31, #3D4E6C), color-stop(0.66, #63728F), color-stop(0.93, #8D9CB9) ); /*background: #757FAD; background-image: linear-gradient(bottom, #585E8A 31%, #737EB0 66%, #919AC9 83%); background-image: -o-linear-gradient(bottom, #585E8A 31%, #737EB0 66%, #919AC9 83%); background-image: -moz-linear-gradient(bottom, #585E8A 31%, #737EB0 66%, #919AC9 83%); background-image: -webkit-linear-gradient(bottom, #585E8A 31%, #737EB0 66%, #919AC9 83%); background-image: -ms-linear-gradient(bottom, #585E8A 31%, #737EB0 66%, #919AC9 83%); background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.31, #585E8A), color-stop(0.66, #737EB0), color-stop(0.83, #919AC9) ); */ /* background-color:#9AC8FF; */ /* background-color:#FFFF33; */ /* Background color of the level 1 menu items. */ border-right:1px solid #b8b8b8; /* #9AB; Creates dividing lines to right of each horizontal */ /* level 1 menu item. */ /* Set to 0px to remove. */ } /* Border-right is automatically removed from */ /* vertical menu below. */ div.multi_drop_menus li:hover { background-color:#999999; /* background-color:#FFFF00; */ /* Background color of hovered menu items. */ } div.multi_drop_menus a { /* color:#776; /* /* Sets the color of all menu types. */ color:#FFFFFF; padding:.6em 5px; /* Creates space top/bottom and left/right respectively */ /* around each menu item's text - set vert height in ems. */ } div.multi_drop_menus a:hover { color:#00CCFF; /* Type color of a hovered menu choice. */ } div.multi_drop_menus ul li ul { width:12em; /* Sets the width of menu levels 2 - 4. */ } div.multi_drop_menus li li { background-color:#E0E0E0; /* Background color of the level 2 menu. */ border-bottom:1px solid #998; /* Lines between menu choices - set to 0px if not wanted. */ } div.multi_drop_menus ul li ul li ul { border-top:1px solid #998; /* Set the border-top of levels 3 and 4 of a horizontal */ /* menu - set to 0px to remove - for a vertical menu, */ /* you will set this for levels 1 - 4 below. */ top:-1px; /* Set to negative value of border-top for perfect pop-out */ /* alignment - set to 0 if border is 0 - don't remove! */ } div.multi_drop_menus li li li { background-color:#EEB; /* Background color of the level 3 menu. */ } div.multi_drop_menus li li li li { background-color:#DDA; /* Background color of the level 4 menu. */ } /* Want transparency on your menus? Add the class */ /* 'transparent' to the multi_drop_menus div. */ div.multi_drop_menus.transparent ul ul li { /* Note: the lower the value, the greater the transparency. */ opacity:0.9; /* CSS3 - range 0 to 1. */ -moz-opacity:0.9; /* Firefox- range 0 to 1. */ filter:alpha(opacity=80); /* IE- range 0 to 100. */ } /* Additional preferences for a vertical menu. */ /* No need to touch these if level 1 is horizontal. */ div.multi_drop_menus.vertical ul { border-top:1px solid #CCB; /* Set the border-top of level 1 of the vertical menu - */ /* broken out separately so it can be different from */ /* top border of other levels. */ } div.multi_drop_menus.vertical li { border-bottom:1px solid #009; /* Adds horizontal lines between menu choices - overrides */ /* main setting above for this feature. */ } div.multi_drop_menus.vertical ul ul { border-top:1px solid #CCB; /* Set the border-top of levels 2 - 4 of a vertical menu - */ /* set to 0 to remove. */ top:-1px; /* Set to negative value of border-top for perfect pop-out */ /* alignment - set to 0 if border is 0 - don't remove! */ } /* End vertical menu preferences. */ /* End menu preferences. */ /* You are strongly advised not to modify the code */ /* that follows :) */ /* The menu mechanics start here. */ div.multi_drop_menus { float:left; width:100%; } div.multi_drop_menus ul { float:left; /* Makes ul wrap li. */ font-size:1em; /* Prevents inheritence from main text style sheet. */ } div.multi_drop_menus li { float:left; /* Causes the list to align horizontally instead of stack. */ list-style-type:none; /* Removes the bullet off each list item. */ position:relative; /* Positioning context for the absolutely positioned */ /* drop-down. */ } div.multi_drop_menus a { display:block; /* Makes link fill li so entire area is "hot". */ text-decoration:none; /* Removes the underlining from the links. */ } /* The horizontal menu ends here. */ /* The drop-downs starts here. */ div.multi_drop_menus ul li ul { position:absolute; /* Positions the drop-down ul in relation to its relatively */ /* positioned li parent. */ border:0; /* Stops inheritance from level 1 ul. */ margin-left:0px; /* Stops inheritance from level 1 ul. */ } div.multi_drop_menus ul li ul li { width:100%; padding:0; /* Stops inheritance. */ border-left:0; /* Stops inheritance. */ border-right:0; /* Stops inheritance. */ } div.multi_drop_menus ul li ul { display:none; /* Conceals the drop-down when menu not hovered. */ } div.multi_drop_menus ul li:hover ul { display:block; /* Shows the drop-down when the menu is hovered. */ z-index:1000; /* Safari needs this to display menu on top of other */ /* page elements. */ } /* Pop-outs starts here. */ body div.multi_drop_menus ul li ul li ul { position:absolute; /* Associated menu with parent li positioning context. */ visibility:hidden; /* Ensures that level 3 menu is not revealed when level 2 */ /* is revealed. */ left:100%; top:-1px; /* Aligns level 3 and 4 pop-out with previous level. */ } div.multi_drop_menus ul li ul li:hover ul { visibility:visible; /* Shows level 3 menu when associated level 2 li is hovered */ } /* Second and third level popouts here. */ div.multi_drop_menus ul li ul li:hover ul li ul { visibility:hidden; /* Ensures that level 4 is not revealed when level 3 */ /* is revealed. */ } div.multi_drop_menus ul li ul li ul li:hover ul { visibility:visible; /* Shows level 4 menu when associated level 3 li */ /* is hovered. */ } /* The drop-downs end here */ /* Extra styles for the vertical menu. */ div.multi_drop_menus.vertical ul { border-left:0px; /* Removes the border of the level 1 ul that can be used */ /* in the horizontal menu. */ margin-left:0; /* Removes left margin that is available on horizontal */ /* menu. */ } .vertical ul { width:100%; /* Took off the id so the ul ul width setting in prefs was */ /* more specific. */ } div.multi_drop_menus.vertical li { position:relative; /* Positioning context for the level 2 menu. */ width:100%; /* Set width of level 1 menu - MUST match left value in */ /* ul ul selector below. */ clear:left; /* Makes the main menu stack - note: turning off floating */ /* (alternative way to create stacking) causes spacing */ /* problems in IE. */ border-right:0; /* Removes right borders used by horizontal level 1. */ } div.multi_drop_menus.vertical ul ul { position:absolute; /* Make ul position relative to parent li for all menu */ /* levels. */ left:100%; /* Align level 2 with level 1 - MUST match li width in */ /* selector above. */ top:-1px; /* Aligns the level 2 pop-out. */ } /* Levels 2 -4 width. */ div.multi_drop_menus.vertical li li { } div.multi_drop_menus.vertical ul ul ul { left:100%; /* Align level 2 with level 3 and 3 with 4 - MUST match li */ /* width in selector above. */ } /* End menu mechanics. */ /* Inevitable hacks for IE6 and <. */ * html div.multi_drop_menus { z-index:1; /* IE6 won't respect high z-index on abs-pos'd child */ /* (ul li ul) without this on its parent rel-pos'd element. */ } /* See: */ /* http://www.last-child.com/conflicting-z-index-in-ie6/ */ * html div.multi_drop_menus ul li ul { z-index:400; /* Ensures menu is on top of other page elements. */ } * html div.multi_drop_menus a { /* Cannot find a way to get the top level 'a' to fill the */ /* unwidthed menu choices without drop-down in IE :( */ } * html div.multi_drop_menus.vertical a { /* Now hasLayout in IE - works on the vert menu as */ /* container has width. */ zoom:100%; } * html div.multi_drop_menus ul ul a { /* Second level of horiz menu. */ zoom:100%; /* Now IE 'haslayout" - IE now makes background hot in */ /* horizontal menus. */ } /* Info on haslayout: http://www.sitepoint.com/forums/showpost.php?p=2041209&postcount=24 http://onhavinglayout.fwpf-webdesign.de/hack_management/ */ /* End of list-based menu. */