/* Add a margin - for this demo only - and a relative position with a high z-index to make it appear over any element below */ #menu_container {position:relative; width:911px; height:41px; z-index:100;} /* Get rid of the margin, padding and bullets in the unordered lists */ #pmenu, #pmenu ul {padding:0; margin:0; list-style-type: none;} /* Set up the link size, color and borders */ #pmenu a, #pmenu a:visited {display:block; font-size:12px; color:#fff; line-height:41px; text-decoration:none; text-indent: -9000px; float:left;} /* Set up the list items */ #pmenu li {float:left;} #pmenu li ul li {/*background: #012966;*/} #pmenu li ul li a, #pmenu li ul li a:visited {line-height:normal;padding-top:5px;padding-bottom:5px;} /* For Non-IE browsers and IE7 */ #pmenu li:hover {position:relative;} /* Make the hovered list color persist */ #pmenu li:hover > a {/*background:#dfd7ca;*/ /*color:#c00;*/} /* Set up the sublevel lists with a position absolute for flyouts and overrun padding. The transparent gif is for IE to work */ #pmenu li ul {display:none;} /* For Non-IE and IE7 make the sublevels visible on list hover. This is all it needs */ #pmenu li:hover > ul {display:block; position:absolute; /*top:-10px;*/ top: 0; left:130px; padding:10px 0 0 0; /*background:transparent url(transparent.gif);*/ background: url(../images/bgSubNav.jpg) repeat-x top left; } /* Position the first sub level beneath the top level links */ #pmenu > li:hover > ul {left:1px; top:41px;} /* Reverse for contact menu */ #pmenu > li.navContact2:hover > ul {left:-96px; top:41px; } /* get rid of the table */ #pmenu 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 #pmenu li a:hover {position:relative; background:#dfd7ca; color:#c00;} /* 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 #pmenu li ul {visibility:hidden; display:block; position:absolute; top:-10px; left:0px; padding:10px 0 0 0; /*background:transparent url(transparent.gif);*/ background: url(../images/bgSubNav.jpg) repeat-x top left;} * html #pmenu li ul li ul {padding:10px 30px 30px 30px} /* keep the third level+ hidden when you hover on first level link */ #pmenu li a:hover ul ul{ visibility:hidden; } /* keep the fourth level+ hidden when you hover on second level link */ #pmenu li a:hover ul a:hover ul ul{ visibility:hidden; } /* keep the fifth level hidden when you hover on third level link */ #pmenu 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 */ #pmenu 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 */ #pmenu li a:hover ul { visibility:visible; left:0px; top:41px; lef\t:0px; to\p:41px; } /* Reverse for contact menu */ #pmenu li.navContact2 a:hover ul {left:-96px; top:41px; } /* make the third level visible when you hover over second level link and position it and all further levels */ #pmenu li a:hover ul a:hover ul{ visibility:visible; top:-10px; left:130px; } /* make the fourth level visible when you hover over third level link */ #pmenu li a:hover ul a:hover ul a:hover ul { visibility:visible; } /* make the fifth level visible when you hover over fourth level link */ #pmenu 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 */ #pmenu 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 */ .navHome {} /*body.home .navHome a {width:86px;text-align:center;padding:0; background: url(../images/tnHome.jpg) no-repeat top left;}*/ body.home #pmenu .navHome a:hover, body.home .navHome a {color:#fff;background: url(../images/tnHome.jpg) no-repeat top right;} .navHome a {width:86px;text-align:center;padding:0; background: url(../images/tnHomeInternal.jpg) no-repeat top left;} #pmenu .navHome a:hover {color:#fff;background: url(../images/tnHomeInternal.jpg) no-repeat top right;} .navNews {} .navNews a {width:66px;text-align:center;padding:0;background: url(../images/tnNews.jpg) no-repeat top left;} #pmenu .navNews a:hover, body.news .navNews a {color:#fff;background: url(../images/tnNews.jpg) no-repeat top right;} .navTeam {} .navTeam a {width:126px;text-align:center;padding:0;background: url(../images/tnTeam.jpg) no-repeat top left;} #pmenu .navTeam a:hover, body.team .navTeam a {color:#fff;background: url(../images/tnTeam.jpg) no-repeat top right;} .navPublications {} .navPublications a {width:108px;text-align:center;padding:0;background: url(../images/tnPublications.jpg) no-repeat top left;} #pmenu .navPublications a:hover, body.publications .navPublications a {color:#fff;background: url(../images/tnPublications.jpg) no-repeat top right;} .navProjects {} .navProjects a {width:80px;text-align:center;padding:0;background: url(../images/tnProjects.jpg) no-repeat top left;} #pmenu .navProjects a:hover, body.projects .navProjects a {color:#fff;background: url(../images/tnProjects.jpg) no-repeat top right;} .navCourses {} .navCourses a {width:83px;text-align:center;padding:0;background: url(../images/tnCourses.jpg) no-repeat top left;} #pmenu .navCourses:hover > a { background: url(../images/tnCourses.jpg) no-repeat top right; } #pmenu .navCourses a:hover, body.courses .navCourses a { background: url(../images/tnCourses.jpg) no-repeat top right; } .navSubCourses { background: url(../images/bgSubNav.jpg) repeat-x top left; } .navSubCourses li { margin: 0; padding: 0; height: 30px; background: #00aeef; } .navSubCourses li a { width: 146px; height: 30px; background-image: none;} /*.navSubCourses li a:hover { background-image: none !important; }*/ /*#pmenu .navCourses:hover > a {background:#ace256; color:#fff;} #pmenu .navCourses a:hover {background:#ace256; color:#fff;}*/ /*.navSubCourses a {background-image: none;}*/ .navCourses ul li {border-right: 0px;} .navCoursesGeneral a { width: 146px; height: 30px; background: url(../images/snCoursesGeneral.jpg) no-repeat top left !important; } .navCoursesGeneral a:hover { width: 146px; height: 30px; background: url(../images/snCoursesGeneral.jpg) no-repeat top right !important; } .navCoursesTheatre a { width: 146px; height: 30px; background: url(../images/snCoursesTheatre.jpg) no-repeat top left !important; } .navCoursesTheatre a:hover { width: 146px; height: 30px; background: url(../images/snCoursesTheatre.jpg) no-repeat top right !important; } .navCoursesGynaecology a { width: 146px; height: 30px; background: url(../images/snCoursesGyn.jpg) no-repeat top left !important; } .navCoursesGynaecology a:hover { width: 146px; height: 30px; background: url(../images/snCoursesGyn.jpg) no-repeat top right !important; } .navCoursesUrology a { width: 146px; height: 30px; background: url(../images/snCoursesUrology.jpg) no-repeat top left !important; } .navCoursesUrology a:hover { width: 146px; height: 30px; background: url(../images/snCoursesUrology.jpg) no-repeat top right !important; } .navCoursesOrthopaedics a { width: 146px; height: 30px; background: url(../images/snCoursesOrtho.jpg) no-repeat top left !important;} .navCoursesOrthopaedics a:hover { width: 146px; height: 30px; background: url(../images/snCoursesOrtho.jpg) no-repeat top right !important; } .navCoursesAnaesthetics a { width: 146px; height: 30px; background: url(../images/snCoursesAna.jpg) no-repeat top left !important;} .navCoursesAnaesthetics a:hover { width: 146px; height: 30px; background: url(../images/snCoursesAna.jpg) no-repeat top right !important; } .navCoursesRobotic a { width: 146px; height: 30px; background: url(../images/snCoursesRobo.png) no-repeat top left !important;} .navCoursesRobotic a:hover { width: 146px; height: 30px; background: url(../images/snCoursesRobo.png) no-repeat top right !important; } .navCoursesCardiac a { width: 146px; height: 30px; background: url(../images/snCoursesCardiac.jpg) no-repeat top left !important;} .navCoursesCardiac a:hover { width: 146px; height: 30px; background: url(../images/snCoursesCardiac.jpg) no-repeat top right !important; } .navCoursesColorectal a { width: 146px; height: 30px; background: url(../images/snCoursesColorectal.jpg) no-repeat top left !important;} .navCoursesColorectal a:hover { width: 146px; height: 30px; background: url(../images/snCoursesColorectal.jpg) no-repeat top right !important; } .navCoursesOesphago a { width: 146px; height: 30px; background: url(../images/snCoursesOesphago.jpg) no-repeat top left !important;} .navCoursesOesphago a:hover { width: 146px; height: 30px; background: url(../images/snCoursesOesphago.jpg) no-repeat top right !important; } .navDownloads {} .navDownloads a {width:103px;text-align:center;padding:0;background: url(../images/tnDownloads.jpg) no-repeat top left;} #pmenu .navDownloads a:hover, body.downloads .navDownloads a {color:#fff;background: url(../images/tnDownloads.jpg) no-repeat top right;} .navTravel {} .navTravel a {width:137px;text-align:center;padding:0;background: url(../images/tnTravel.jpg) no-repeat top left;} #pmenu .navTravel a:hover, body.travel .navTravel a {color:#fff;background: url(../images/tnTravel.jpg) no-repeat top right;} .navContact {} body.home .navContact a { width: 122px; text-align: center; padding: 0;background: url(../images/tnContact.jpg) no-repeat top left; } body.home #pmenu .navContact a:hover { color:#fff;background: url(../images/tnContact.jpg) no-repeat top right;} .navContact a { width: 122px; text-align: center; padding: 0;background: url(../images/tnContactInternal.jpg) no-repeat top left; } #pmenu .navContact a:hover, body.contact .navContact a { color:#fff;background: url(../images/tnContactInternal.jpg) no-repeat top right;} /*.navSexual {} .navSexual a {width:74px;text-align:center;padding:0;} .navSubSexual li a {width: 140px; height: auto; padding-left: 10px; padding-right: 10px;text-align:left;} #pmenu .navSexual:hover > a {background:#ee93ed; color:#fff;} #pmenu .navSexual a:hover {background:#ee93ed; color:#fff;} .navSubSexual a {background: #9e9f9f;} .navSexual ul li {border-right: 0px;}*/ /*.navContact2 {border-right: 0px; width:94px;} .navContact2 a { width: 94px; text-align: center; padding: 0;} .navSubContact2 li a {width: 140px; height: auto; padding-left: 10px; padding-right: 10px; text-align: left;} #pmenu .navContact2:hover > a {background:#9e9f9f; color:#fff;} #pmenu .navContact2 a:hover {background:#9e9f9f; color:#fff;} .navSubContact2 a {background: #9e9f9f;} .navSubContact2 a:hover {background: #012966 !important;} .navContact2 ul li {border-right: 0px;}*/