/* the horizontal menu starts here */ div#listmenu { /*font-size: 0.9em;*/ /*background-color: #DC241F;*/ /* margin-top: 0px; */ /* margin-left: 0px;*/ /* width: 100%;*/ float: left; border-top: 0px solid #000; border-bottom: 0px solid #000; /*margin-bottom: 24px;*/ /*line-height: 25px;*/ position:relative; top: 0px; left:-30px; bottom: 0; z-index: 99; } div#ix_listmenu { /*font-size: 0.9em;*/ /*background-color: #DC241F;*/ margin-top: 15px; margin-left: 90px; width: 100%; float: left; border-top: 0px solid #000; border-bottom: 0px solid #000; margin-bottom: 10px; left:0px; line-height: 25px; top:-18px; left: 0px; position:relative; z-index: 99; } div#listmenu ul, div#ix_listmenu ul {margin:0 0 0 30px;/* indents ul from edge of container */ } div#listmenu li, div#ix_listmenu li { background-color: #fff; background-image: url(/menu/fiagt3/button-up.png); background-repeat:repeat-y; background-position: left bottom; list-style-type: none; position: relative; float: left; border-right: 1px solid #000; border-top: 1px solid #000; border-bottom: 1px solid #000; z-index: 99; } div#listmenu li:first-child, div#ix_listmenu li:first-child { border-left: 1px solid #000 } div#listmenu li:hover, div#ix_listmenu li:hover { background-color:#f00; /*sets the background of the menu items */ background-image: url(/menu/fiagt3/button-down.png); background-position: left bottom; background-repeat:repeat-y; color: #fdc903; } div#listmenu p, div#ix_listmenu p { color: #f0f0f0; text-decoration: none; line-height: 25px; display: block; padding: 0 6px } div#listmenu a, div#ix_listmenu a { color: #f0f0f0; text-decoration: none; line-height: 25px; display: block; padding: 0 6px } div#listmenu a:hover, div#ix_listmenu a:hover { color: #fdc903 } /* the horizontal menu ends here */ /* the drop-down starts here */ div#listmenu ul li ul, div#ix_listmenu ul li ul { margin:0; /* prevents the TEMP value inheriting from the horiz menu - OK to remove if you remove TEMP above */ position:absolute; /* positions the drop-down ul in relation to its relatively positioned li parent */ width:10em; /*sets the width of the menu - in combo with the li's 100% width, makes the menu stack*/ left:-1px; /*aligns the drop exactly under the menu */ z-index: 99; } div#listmenu ul li ul li, div#ix_listmenu ul li ul li { padding: 0 0 1px; width: 100%; border-right: 1px solid #000; border-bottom: 1px solid #000; border-left: 1px solid #000; z-index: 99; } div#listmenu ul li ul li:first-child, div#ix_listmenu ul li ul li:first-child { border-top: 1px solid #000 } /* make the drop-down display as the menu is rolled over */ div#listmenu ul li ul, div#ix_listmenu ul li ul {display:none; z-index: 99;} /* conceals the drop-down when menu not hovered */ div#listmenu ul li:hover ul, div#ix_listmenu ul li:hover ul {display:block; } /* shows the drop-down when the menu is hovered */ /* pop-out starts here */ body div#listmenu ul li ul li ul, body div#listmenu_ix ul li ul li ul { visibility:hidden; /* same effect as display:none in this situation */ top:-1px; left:10em; z-index: 99; } div#listmenu ul li ul li:hover ul, div#ix_listmenu ul li ul li:hover ul {visibility:visible;} /* same effect as display:block in this situation */ /* another level of pop-outs */ div#listmenu ul li ul li:hover ul li ul, div#ix_listmenu ul li ul li:hover ul li ul {display:none;} /* conceals the drop-down when menu not hovered */ div#listmenu ul li ul li ul li:hover ul, div#ix_listmenu ul li ul li ul li:hover ul {display:block; } /* shows the drop-down when the menu is hovered */ /* THE HACK ZONE - */ /* hack for IE (all flavors) so the menu has a vertical line on the left */ * html div#listmenu ul, html div#ix_listmenu ul { float:left; /* makes the ul wrap the li's */ border-left:1px solid #000000; /* adds the rightmost menu vertical line to the ul */ margin-left:15px; /* IE doubles the given value above - why? */ } /* add a top line to drops and pops in IE browsers - can't read :first-child */ * html div#listmenu ul li ul, * html div#ix_listmenu ul li ul { border-top: 1px solid #000000; border-left: 0 none } /* the Tantek hack to feed IE Win 5.5-5.0 a lower value to get the pop-out to touch the drop-down */ * html div#listmenu ul li ul li ul* html, div#ix_listmenu ul li ul li ul { left:9.85em; voice-family: "\"}\""; voice-family:inherit; left:10em; z-index: 99; } /* and the "be nice to Opera" rule */ html>body div#listmenu ul li ul li ul { top:-1px; left:10em; z-index: 99; } /* an Opera-only hack to fix a redraw problem by invisibly extending the ul */ /* the first-level drop stays open for 100px below the bottom but at least it works */ /* this can be reduced to as little as 22px if you don't have pop-outs */ /* the pop-out menu stays open for 22px below the bottom but at least it works */ @media all and (min-width: 0px){ body div#listmenu ul li ul {padding-bottom:70px;} body div#listmenu ul li ul li ul {padding-bottom:22px;} body div#listmenu ul li ul li ul li ul li:hover {visibility:visible;} /* same effect as display:block in this situation */ } /*end Opera hack */ /* end of hack zone */ /* END OF LIST-BASED MENU */