/************************************************* * FARGEMAL FOR HØGSKOLENS WEBSIDER: * --------------------------------- * Mørk blå: #073B58 (hoved) * Blå: #658595 (sekundær) * Lys blå: #E7F3F6 (bodyfarge + lys blå bokser) * Grå: #8f8f8e (farge bak cloud box) * Lys grå: #F0F0EF (box BG) * --------------------------------- * LINKER - forsiden * --------------------------------- * Blå link m/underline: #1580b5 * Mellomblå: #89b6cd (brukt på pilknapp) ************************************************** * STUDENT FARGER: * --------------------------------- * Turkis: #326668 (hovedfarge header + footer) * Lys turkis: #6c9f95 * Klarblå: #289ac4 **************************************************/ body {font-family: verdana, arial, sans-serif; font-size:100%;} div#listmenu * {margin:0; padding:0;} /* the horizontal menu starts here */ div#listmenu { width: auto; /* makes the div full width */ height: auto; background: none; float:left; font-size: 11px; /* SET FONT-SIZE HERE */ margin: 5px 0 0 0; /* TEMPORARY - pushes the div away from the top of the browser for clarity in this example*/ } div#listmenu ul { margin: 0;/* indents ul from edge of container - NOTE: diff value for IE in hacks below */ float:left; width:360px } div#listmenu li.head { float: left; /* causes the list to align horizontally instead of stack */ position:relative; /* positioning context for the absolutely positioned drop-down */ list-style-type:none; /* removes the bullet off each list item */ background: none; border-right:1px solid #fff; /* creates dividing lines between the li elements */ } div#listmenu li { float:left; /* causes the list to align horizontally instead of stack */ position:relative; /* positioning context for the absolutely positioned drop-down */ list-style-type:none; /* removes the bullet off each list item */ background-color: #89b6cd; } div#listmenu li:first-child { border-left:1px solid #fff; /*the first vertial line on the menu */ } div#listmenu li:hover { background-color: #89b6cd; /*sets the background of the menu items */ } div#listmenu a { display:block; padding:0px 4px; /*creates space each side of menu item's text */ text-decoration:none; /* removes the underlining of the link */ color:#fff; /* sets the type color */ } /*div#listmenu a:hover { color:#fff; background-color: #286b89; }*/ div#listmenu ul li.head ul li a:hover { /*setter bakgrunn på bare underlistene, ikke head*/ color:#fff; background-color: #286b89; } /* the menu ends here */ /* the drop-down starts here */ div#listmenu ul li ul { margin: 0; z-index:10; /* puts drop-down on top of div - Safari needs this as menu is 1px higher */ position:absolute; /* positions the drop-down ul in relation to its relatively positioned li parent */ width:16em; /*sets the width of the menu - in combo with the li's 100% width, makes the menu stack*/ border-right:0; /* stops SCBs drops having two right borders - they inherit the border, IE doesn't */ left:-1px; /*aligns the drop exactly under the menu */ } div#listmenu ul li ul li {padding:0; width:100%; /* makes the list items fill the list container (ul) */ border-left:1px solid #fff; /* three sides of each drop-down item */ border-bottom:1px solid #fff; border-right:1px solid #fff;} div#listmenu ul li ul li a {padding:1px .5em;} div#listmenu ul li ul li:first-child { border-top:1px solid #fff; /*the top edge of the dropdown */ } /* make the drop-down display as the menu is rolled over */ div#listmenu ul li ul {display:none;} /* conceals the drop-down when menu not hovered */ div#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 { position:absolute; visibility:hidden; /* same effect as display:none in this situation */ top:-1px; left:10em; } div#listmenu ul li ul li:hover ul {visibility:visible;} /* same effect as display:block in this situation */ /* second level popouts start here*/ div#listmenu ul li ul li:hover ul li ul {visibility:hidden;} div#listmenu ul li ul li ul li:hover ul {visibility:visible;} /* same effect as display:block in this situation */ /* THE HACK ZONE - */ /* hack for IE (all flavors) so the menu has a vertical line on the left */ * html div#listmenu ul { float:left; /* makes the ul wrap the li's */ border-left:1px solid #fff; /* 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 { border-top:1px solid #fff; border-left:0px; /* stops the drop inheriting the ul border */ } /* 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 { left:9.85em; voice-family: "\"}\""; voice-family:inherit; left:10em; } /* and the "be nice to Opera" rule */ html>body div#listmenu ul li ul li ul { left:10em; } /* 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:100px;} body div#listmenu ul li ul li ul {padding-bottom:22px;} 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 */ /* the drop-down ends here */ /* END OF LIST-BASED MENU */