/* ================================================================ This copyright notice must be untouched at all times. The original version of this stylesheet and the associated (x)html is available at http://www.cssplay.co.uk/menus/simple_vertical.html Copyright (c) 2005-2007 Stu Nicholls. All rights reserved. This stylesheet and the associated (x)html may be modified in any way to fit your requirements. =================================================================== */ /* Add a relative position with a high z-index to make it appear over any element below */ #menu_container1 {position:relative; width:308px; height:27px; z-index:130;} #menu_container2 {position:relative; width:474px; height:27px; z-index:120;} #menu_container3 {position:relative; width:480px; height:27px; z-index:100;} /* Get rid of the margin, padding and bullets in the unordered lists */ #pmenu1, #pmenu1 ul, #pmenu2, #pmenu2 ul, #pmenu3, #pmenu3 ul {padding:0; margin:0; list-style-type: none;} /* Set up the link size, color and borders */ #pmenu1 a, #pmenu1 a:visited, #pmenu2 a, #pmenu2 a:visited, #pmenu3 a, #pmenu3 a:visited { display:block; color:#000; height:27px; background: #fff; text-decoration: none; } /* define initial images */ #pmenu1 a.students, #pmenu1 a.students:visited {background: url('alex/uoduckstore/images/template/link_01_01.gif');} #pmenu1 a.faculty, #pmenu1 a.faculty:visited {background: url('alex/uoduckstore/images/template/link_01_02.gif');} #pmenu1 a.alumni, #pmenu1 a.alumni:visited {background: url('alex/uoduckstore/images/template/link_01_03.gif');} #pmenu1 a.parents, #pmenu1 a.parents:visited {background: url('alex/uoduckstore/images/template/link_01_04.gif');} #pmenu1 a.students_active, #pmenu1 a.students_active:visited {background: url('/images/template/link_01_01a.gif') no-repeat;} #pmenu1 a.faculty_active, #pmenu1 a.faculty_active:visited {background: url('/images/template/link_01_02a.gif') no-repeat;} #pmenu1 a.alumni_active, #pmenu1 a.alumni_active:visited {background: url('/images/template/link_01_03a.gif') no-repeat;} #pmenu1 a.parents_active, #pmenu1 a.parents_active:visited {background: url('/images/template/link_01_04a.gif') no-repeat;} #pmenu2 a.litduck, #pmenu2 a.litduck:visited {background: url('alex/uoduckstore/images/template/link_02_01.gif');} #pmenu2 a.digiduck, #pmenu2 a.digiduck:visited {background: url('alex/uoduckstore/images/template/link_02_02.gif');} #pmenu2 a.createduck, #pmenu2 a.createduck:visited {background: url('alex/uoduckstore/images/template/link_02_03.gif');} #pmenu2 a.spiritduck, #pmenu2 a.spiritduck:visited {background: url('alex/uoduckstore/images/template/link_02_04.gif');} #pmenu2 a.duckstop, #pmenu2 a.duckstop:visited {background: url('alex/uoduckstore/images/template/link_02_05.gif');} #pmenu2 a.litduck_active, #pmenu2 a.litduck_active:visited {background:#3DB1E4 url(/images/template/link_02_01a.gif) no-repeat;} #pmenu2 a.digiduck_active, #pmenu2 a.digiduck_active:visited {background:#7B417C url(/images/template/link_02_02a.gif) no-repeat;} #pmenu2 a.createduck_active, #pmenu2 a.createduck_active:visited {background:#AD271C url(/images/template/link_02_03a.gif) no-repeat;} #pmenu2 a.spiritduck_active, #pmenu2 a.spiritduck_active:visited {background:#7BBE33 url(/images/template/link_02_04a.gif) no-repeat;} #pmenu2 a.duckstop_active, #pmenu2 a.duckstop_active:visited {background:#F6A136 url(/images/template/link_02_05a.gif) no-repeat;} #pmenu3 a.about, #pmenu3 a.about:visited {background: url('alex/uoduckstore/images/template/link_03_02.gif');} #pmenu3 a.info, #pmenu3 a.info:visited {background: url('alex/uoduckstore/images/template/link_03_03.gif');} #pmenu3 a.help, #pmenu3 a.help:visited {background: url('alex/uoduckstore/images/template/link_03_04.gif');} #pmenu3 a.newsletters, #pmenu3 a.newsletters:visited {background: url('alex/uoduckstore/images/template/link_03_05.gif');} #pmenu3 a.calendar, #pmenu3 a.calendar:visited {background: url('alex/uoduckstore/images/template/link_03_06.gif');} #pmenu3 a.links, #pmenu3 a.links:visited {background: url('alex/uoduckstore/images/template/link_03_07.gif');} #pmenu3 a.sitemap, #pmenu3 a.sitemap:visited {background: url('alex/uoduckstore/images/template/link_03_08.gif');} #pmenu3 a.about_active, #pmenu3 a.about_active:visited {background: url('/images/template/link_03_02a.gif') no-repeat;} #pmenu3 a.info_active, #pmenu3 a.info_active:visited {background: url('/images/template/link_03_03a.gif') no-repeat;} #pmenu3 a.help_active, #pmenu3 a.help_active:visited {background: url('/images/template/link_03_04a.gif') no-repeat;} #pmenu3 a.newsletters_active, #pmenu3 a.newsletters_active:visited {background: url('/images/template/link_03_05a.gif') no-repeat;} #pmenu3 a.calendar_active, #pmenu3 a.calendar_active:visited {background: url('/images/template/link_03_06a.gif') no-repeat;} #pmenu3 a.links_active, #pmenu3 a.links_active:visited {background: url('/images/template/link_03_07a.gif') no-repeat;} #pmenu3 a.sitemap_active, #pmenu3 a.sitemap_active:visited {background: url('/images/template/link_03_08a.gif') no-repeat;} /* Set up the list items */ #pmenu1 li, #pmenu2 li, #pmenu3 li {float: left; background:#fff;} /* IE5.5 and IE6: explicitly define widths */ * html #pmenu1 li.students_drop {width: 81px;} * html #pmenu1 li.faculty_drop {width: 78px;} * html #pmenu1 li.alumni {width: 76px;} * html #pmenu1 li.parents {width: 73px;} * html #pmenu2 li.litduck_drop {width: 98px;} * html #pmenu2 li.digiduck_drop {width: 95px;} * html #pmenu2 li.createduck_drop {width: 108px;} * html #pmenu2 li.spiritduck_drop {width: 90px;} * html #pmenu2 li.duckstop_drop {width: 83px;} * html #pmenu3 li.about_drop {width: 74px;} * html #pmenu3 li.info_drop {width: 46px;} * html #pmenu3 li.help_drop {width: 51px;} * html #pmenu3 li.newsletters {width: 101px;} * html #pmenu3 li.calendar {width: 76px;} * html #pmenu3 li.links {width: 53px;} * html #pmenu3 li.sitemap {width: 79px;} /* For Non-IE browsers and IE7 */ #pmenu1 li:hover, #pmenu2 li:hover, #pmenu3 li:hover {position:relative;} /* Make the hovered list color persist */ #pmenu1 li:hover > a.students {background:#000000 url(/images/template/link_01_01a.gif) no-repeat;} #pmenu1 li:hover > a.faculty {background:#000000 url(/images/template/link_01_02a.gif) no-repeat;} #pmenu1 li:hover > a.alumni {background:#000000 url(/images/template/link_01_03a.gif) no-repeat;} #pmenu1 li:hover > a.parents {background:#000000 url(/images/template/link_01_04a.gif) no-repeat;} #pmenu2 li:hover > a.litduck {background:#3DB1E4 url(/images/template/link_02_01a.gif) no-repeat;} #pmenu2 li:hover > a.digiduck {background:#7B417C url(/images/template/link_02_02a.gif) no-repeat;} #pmenu2 li:hover > a.createduck {background:#AD271C url(/images/template/link_02_03a.gif) no-repeat;} #pmenu2 li:hover > a.spiritduck {background:#7BBE33 url(/images/template/link_02_04a.gif) no-repeat;} #pmenu2 li:hover > a.duckstop {background:#F6A136 url(/images/template/link_02_05a.gif) no-repeat;} #pmenu3 li:hover > a.about {background:#006747 url(/images/template/link_03_02a.gif) no-repeat;} #pmenu3 li:hover > a.info {background:#006747 url(/images/template/link_03_03a.gif) no-repeat;} #pmenu3 li:hover > a.help {background:#006747 url(/images/template/link_03_04a.gif) no-repeat;} #pmenu3 li:hover > a.newsletters {background:#006747 url(/images/template/link_03_05a.gif) no-repeat;} #pmenu3 li:hover > a.calendar {background:#006747 url(/images/template/link_03_06a.gif) no-repeat;} #pmenu3 li:hover > a.links {background:#006747 url(/images/template/link_03_07a.gif) no-repeat;} #pmenu3 li:hover > a.sitemap {background:#006747 url(/images/template/link_03_08a.gif) no-repeat;} /* Set up the sublevel lists with a position absolute for flyouts and overrun padding. The transparent gif is for IE to work */ #pmenu1 li ul, #pmenu2 li ul, #pmenu3 li ul {display:none;} /* For Non-IE and IE7 make the sublevels visible on list hover. This is all it needs */ #pmenu1 li:hover > ul, #pmenu2 li:hover > ul, #pmenu3 li:hover > ul {display:block; position:absolute; top:-11px; left:160px; padding:10px 30px 30px 30px; background:transparent url(/images/gr_invisible.gif); width:190px;} /* Position the first sub level beneath the top level links */ #pmenu1 > li:hover > ul, #pmenu2 > li:hover > ul, #pmenu3 > li:hover > ul {left:-30px; top:17px;} /* get rid of the table */ #pmenu1 table, #pmenu2 table, #pmenu3 table {position:absolute; border-collapse:collapse; top:0; left:0; z-index:100; font-size:1em;} /* For IE5.5 and IE6 give the hovered links a position relative and a change of background and foreground color. This is needed to trigger IE to show the sub levels */ * html #pmenu1 li.students_drop a:hover {position:relative; background:#000000 url(/images/template/link_01_01a.gif) no-repeat;} * html #pmenu1 li.faculty_drop a:hover {position:relative; background:#000000 url(/images/template/link_01_02a.gif) no-repeat;} * html #pmenu1 li.alumni a:hover {position:relative; background:#000000 url(/images/template/link_01_03a.gif) no-repeat;} * html #pmenu1 li.parents a:hover {position:relative; background:#000000 url(/images/template/link_01_04a.gif) no-repeat;} * html #pmenu2 li.litduck_drop a:hover {position:relative; background:#3DB1E4 url(/images/template/link_02_01a.gif) no-repeat;} * html #pmenu2 li.digiduck_drop a:hover {position:relative; background:#7B417C url(/images/template/link_02_02a.gif) no-repeat;} * html #pmenu2 li.createduck_drop a:hover {position:relative; background:#AD271C url(/images/template/link_02_03a.gif) no-repeat;} * html #pmenu2 li.spiritduck_drop a:hover {position:relative; background:#7BBE33 url(/images/template/link_02_04a.gif) no-repeat;} * html #pmenu2 li.duckstop_drop a:hover {position:relative; background:#F6A136 url(/images/template/link_02_05a.gif) no-repeat;} * html #pmenu3 li.about_drop a:hover {position:relative; background:#006747 url(/images/template/link_03_02a.gif) no-repeat;} * html #pmenu3 li.info_drop a:hover {position:relative; background:#006747 url(/images/template/link_03_03a.gif) no-repeat;} * html #pmenu3 li.help_drop a:hover {position:relative; background:#006747 url(/images/template/link_03_04a.gif) no-repeat;} * html #pmenu3 li.newsletters a:hover {position:relative; background:#006747 url(/images/template/link_03_05a.gif) no-repeat;} * html #pmenu3 li.calendar a:hover {position:relative; background:#006747 url(/images/template/link_03_06a.gif) no-repeat;} * html #pmenu3 li.links a:hover {position:relative; background:#006747 url(/images/template/link_03_07a.gif) no-repeat;} * html #pmenu3 li.sitemap a:hover {position:relative; background:#006747 url(/images/template/link_03_08a.gif) no-repeat;} /* For accessibility of the top level menu when tabbing */ /* #pmenu2 li.litduck_drop a:active, #pmenu2 li.litduck_drop a:focus {background:#3DB1E4 url(/images/template/link_02_01a.gif;} */ #pmenu1 li.students_drop {height: inherit; background: #000 url(/images/template/link_01_01.gif) no-repeat;} #pmenu1 li.faculty_drop {height: inherit; background: #000 url(/images/template/link_01_02.gif) no-repeat;} #pmenu1 li.alumni {height: inherit; background: #000 url(/images/template/link_01_03.gif) no-repeat;} #pmenu1 li.parents {height: inherit; background: #000 url(/images/template/link_01_04.gif) no-repeat;} #pmenu2 li.litduck_drop {height: inherit; background: #F6D317 url(/images/template/link_02_01.gif) no-repeat;} #pmenu2 li.digiduck_drop {height: inherit; background: #F6D317 url(/images/template/link_02_02.gif) no-repeat;} #pmenu2 li.createduck_drop {height: inherit; background: #F6D317 url(/images/template/link_02_03.gif) no-repeat;} #pmenu2 li.spiritduck_drop {height: inherit; background: #F6D317 url(/images/template/link_02_04.gif) no-repeat;} #pmenu2 li.duckstop_drop {height: inherit; background: #F6D317 url(/images/template/link_02_05.gif) no-repeat;} #pmenu3 li.about_drop {height: inherit; background: #006747 url(/images/template/link_03_02.gif) no-repeat;} #pmenu3 li.info_drop { height: inherit; background: #006747 url(/images/template/link_03_03.gif) no-repeat;} #pmenu3 li.help_drop {height: inherit; background: #006747 url(/images/template/link_03_04.gif) no-repeat;} #pmenu3 li.newsletters {height: inherit; background: #006747 url(/images/template/link_03_05.gif) no-repeat;} #pmenu3 li.calendar {height: inherit; background: #006747 url(/images/template/link_03_06.gif) no-repeat;} #pmenu3 li.links {height: inherit; background: #006747 url(/images/template/link_03_07.gif) no-repeat;} #pmenu3 li.sitemap {height: inherit; background: #006747 url(/images/template/link_03_08.gif) no-repeat;} /* This lot is for IE5.5 and IE6 ONLY and is necessary to make the sublevels appear */ /* change the drop down levels from display:none; to visibility:hidden; */ * html #pmenu1 li ul, * html #pmenu2 li ul, * html #pmenu3 li ul {visibility:hidden; display:block; position:absolute; top:-13px; left:160px; padding:10px 30px 30px 30px; background:transparent url(/images/gr_invisible.gif);} /* keep the third level+ hidden when you hover on first level link */ #pmenu1 li a:hover ul ul, #pmenu2 li a:hover ul ul, #pmenu3 li a:hover ul ul{visibility:hidden;} /* keep the fourth level+ hidden when you hover on second level link */ #pmenu1 li a:hover ul a:hover ul ul, #pmenu2 li a:hover ul a:hover ul ul, #pmenu3 li a:hover ul a:hover ul ul{visibility:hidden;} /* keep the fifth level hidden when you hover on third level link */ #pmenu1 li a:hover ul a:hover ul a:hover ul ul, #pmenu2 li a:hover ul a:hover ul a:hover ul ul, #pmenu3 li a:hover ul a:hover ul a:hover ul ul{visibility:hidden;} /* keep the sixth level hidden when you hover on fourth level link */ #pmenu1 li a:hover ul a:hover ul a:hover ul a:hover ul ul, #pmenu2 li a:hover ul a:hover ul a:hover ul a:hover ul ul, #pmenu3 li a:hover ul a:hover ul a:hover ul a:hover ul ul{visibility:hidden;} /* make the second level visible when hover on first level link and position it */ #pmenu1 li a:hover ul, #pmenu2 li a:hover ul, #pmenu3 li a:hover ul {visibility:visible; left:-30px; top:18px; lef\t:-30px; to\p:18px;} /* make the third level visible when you hover over second level link and position it and all further levels */ #pmenu1 li a:hover ul a:hover ul, #pmenu2 li a:hover ul a:hover ul, #pmenu3 li a:hover ul a:hover ul{visibility:visible; top:-11px; left:158px;} /* make the fourth level visible when you hover over third level link */ #pmenu1 li a:hover ul a:hover ul a:hover ul, #pmenu2 li a:hover ul a:hover ul a:hover ul, #pmenu3 li a:hover ul a:hover ul a:hover ul {visibility:visible;} /* make the fifth level visible when you hover over fourth level link */ #pmenu1 li a:hover ul a:hover ul a:hover ul a:hover ul, #pmenu2 li a:hover ul a:hover ul a:hover ul a:hover ul, #pmenu3 li a:hover ul a:hover ul a:hover ul a:hover ul {visibility:visible;} /* make the sixth level visible when you hover over fifth level link */ #pmenu1 li a:hover ul a:hover ul a:hover ul a:hover ul a:hover ul, #pmenu2 li a:hover ul a:hover ul a:hover ul a:hover ul a:hover ul, #pmenu3 li a:hover ul a:hover ul a:hover ul a:hover ul a:hover ul {visibility:visible;} /* If you can see the pattern in the above IE5.5 and IE6 style then you can add as many sub levels as you like */ #pmenu1 li.menuitem, #pmenu2 li.menuitem, #pmenu3 li.menuitem { line-height: 27px; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px; text-indent: 5px; background: #fff; width: 190px; } #pmenu1 li.students, #pmenu1 li.faculty { border:1px solid #000000; border-width: 0px 1px 1px 1px; } #pmenu1 li.students a:hover, #pmenu1 li.faculty a:hover {background:#f7ebaf;} * html #pmenu1 li.students a:hover, * html #pmenu1 li.faculty a:hover { background:#F7EEBE url(/images/gr_invisible.gif); } #pmenu2 li.litduck { border:1px solid #3DB1E4; border-width: 0px 1px 1px 1px; } #pmenu2 li.litduck a:hover {background:#9EDFF4;} * html #pmenu2 li.litduck a:hover { background:#9EDFF4 url(/images/gr_invisible.gif); } #pmenu2 li.digiduck { border:1px solid #7B417C; border-width: 0px 1px 1px 1px; } #pmenu2 li.digiduck a:hover {background-color:#C6AAC7;} * html #pmenu2 li.digiduck a:hover { background:#C6AAC7 url(/images/gr_invisible.gif); } #pmenu2 li.createduck { border:1px solid #AD271C; border-width: 0px 1px 1px 1px; } #pmenu2 li.createduck a:hover {background-color:#DF9B8F;} * html #pmenu2 li.createduck a:hover { background:#DF9B8F url(/images/gr_invisible.gif); } #pmenu2 li.spiritduck { border:1px solid #7BBE33; border-width: 0px 1px 1px 1px; } #pmenu2 li.spiritduck a:hover {background-color:#C6E29E;} * html #pmenu2 li.spiritduck a:hover { background:#C6E29E url(/images/gr_invisible.gif); } #pmenu2 li.duckstop { border:1px solid #F6A136; border-width: 0px 1px 1px 1px; } #pmenu2 li.duckstop a:hover {background-color:#FAD09A;} * html #pmenu2 li.duckstop a:hover { background:#FAD09A url(/images/gr_invisible.gif); } #pmenu3 li.about, #pmenu3 li.info, #pmenu3 li.help { border:1px solid #f6d317; border-width: 0px 1px 1px 1px; } #pmenu3 li.about a:hover, #pmenu3 li.info a:hover, #pmenu3 li.help a:hover {background-color:#f7ebaf;} * html #pmenu3 li.about a:hover, * html #pmenu3 li.info a:hover, * html #pmenu3 li.help a:hover { background:#f7ebaf url(/images/gr_invisible.gif); } #pmenu1 li.enclose, #pmenu2 li.enclose, #pmenu3 li.enclose {border-width:1px;}