Team:Peking/mainnav

From 2010.igem.org

Revision as of 12:31, 19 September 2010 by Evamonlight (Talk | contribs)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

/***** MAIN NAVIGATION *****/

       /***** General Styles*****/
       .globalNav { margin: -1px 0 0 -1px; width: 974px; height: 56px; position: absolute; z-index: 3;} /* required for layering above hero */

.globalNav .bg { border:0px solid black; position:absolute; width: 974px; height:56px; background:url(/images/nav/mainnav_bar.png); } /* applies nav bar backgroud image */ .ie6 .globalNav .bg { background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/nav/mainnav_bar.png' ,sizingMethod='crop'); } /* IE6 specific to keep translucency on png backgroud image */ .globalNav .bg { position:absolute; z-index:1; } /* required for hover state activation */

/* Dropdown general styles */ ul.drop { list-style: none; text-align: left; position: absolute; z-index: 4; } ul.drop li { float: left; display: inline; } ul.drop li a {display: block; text-decoration: none; color: #232323; font-weight: bold; } ul.drop li .drop-hover { } ul.drop li ul { display: none; list-style: none; position: absolute; margin: -1px 0 0 0; z-index: 90; padding: 0; } /* required to keep dropdown layered above hero space */ ul.drop li ul li { margin: 0 0 0 12px; overflow:hidden; } ul.drop li a span { position:relative; left:-10000px; } ul.drop li ul li a { display: block; padding: 7px 5px 7px 12px; width:145px; text-decoration: none; font-size: 11px; color: #FFFFFF !important; background: transparent url(/images/global/arrow_dropdown.gif) no-repeat left 14px; } /* add arrow graphic to sibling subnav items */ ul.drop li ul li a:hover { text-decoration:none; color: #336666 !important;} ul.drop li.about .drop-hover:hover { background: transparent url(/images/nav/mainnav_about-hover_new.png) no-repeat 0 0; height: 48px; } /* hover state */

/* Navigation specific elements */ ul.drop li.about .drop-hover { background: transparent url(/images/nav/mainnav_about-hover.png) no-repeat 0 0; height: 48px; } /* hover state */ ul.drop li.about ul { padding: 10px 0 18px 0; width: 186px; background: #0BA39C url(/images/nav/mainnav_about-drophover.png) no-repeat 0 bottom; } /* applies dropdown background image */ .ie6 ul.drop li.about ul { background-image: url(/images/nav/mainnav_about-drophover.gif); } /* IE6 specfic dropdown background image */ ul.drop li.about ul li { width: 184px; background: transparent url(/images/nav/dropnav_line_about.png) no-repeat 0 bottom; } /* add divider line to sibling subnav items */ ul.drop li.about ul li.last { background: none; } /* to remove divider line from last sibling subnav item */ ul.drop li.about { width: 186px; height: 49px; } ul.drop li.about .active, ul.drop li.about .active:hover { background: transparent url(/images/nav/mainnav_about-active.png) no-repeat 0 0; height: 48px; } /* applies active state to parent nav item */

ul.drop li.responsibility .drop-hover { background: transparent url(/images/nav/mainnav_responsibility-hover.png) no-repeat 0 0; height: 48px; } ul.drop li.responsibility ul { padding: 10px 0 18px 0; width: 186px; background: transparent url(/images/nav/mainnav_responsibility-drophover.png) no-repeat 0 bottom; } .ie6 ul.drop li.responsibility ul { background-image: url(/images/nav/mainnav_responsibility-drophover.gif); } ul.drop li.responsibility ul li { width: 184px; background: transparent url(/images/nav/dropnav_line_responsibility.png) no-repeat 0 bottom; } ul.drop li.responsibility ul li.last { background: none; } ul.drop li.responsibility { margin: 0 0 0 -1px; width: 186px; height: 49px; } ul.drop li.responsibility .active, ul.drop li.responsibility .active:hover { background: transparent url(/images/nav/mainnav_responsibility-active.png) no-repeat 0 0; height: 48px; } ul.drop li.responsibility .drop-hover:hover { background: transparent url(/images/nav/mainnav_responsibility-hover_new.png) no-repeat 0 0; height: 48px; }

ul.drop li.research .drop-hover { background: transparent url(/images/nav/mainnav_research-hover.png) no-repeat 0 0; height: 48px; } ul.drop li.research ul { padding: 10px 0 18px 0; width: 186px; background: #859E30 url(/images/nav/mainnav_research-drophover.png) no-repeat 0 bottom; } .ie6 ul.drop li.research ul { background-image: url(/images/nav/mainnav_research-drophover.gif); } ul.drop li.research ul li { width: 184px; background: transparent url(/images/nav/dropnav_line_research.png) no-repeat 0 bottom; } ul.drop li.research ul li.last { background: none; } ul.drop li.research { margin: 0 0 0 -2px; width: 186px; height: 49px; } ul.drop li.research .active, ul.drop li.research .active:hover { background: transparent url(/images/nav/mainnav_research-active.png) no-repeat 0 0; height: 48px; } ul.drop li.research .drop-hover:hover { background: transparent url(/images/nav/mainnav_research-hover_new.png) no-repeat 0 0; height: 48px; }

ul.drop li.products .drop-hover { background: transparent url(/images/nav/mainnav_products-hover.png) no-repeat 0 0; height: 48px; } ul.drop li.products ul { padding: 10px 0 18px 0; width: 186px; background: #2A89B9 url(/images/nav/mainnav_products-drophover.png) no-repeat 0 bottom; } .ie6 ul.drop li.products ul { background-image: url(/images/nav/mainnav_products-drophover.gif); } ul.drop li.products ul li { width: 184px; background: transparent url(/images/nav/dropnav_line_products.png) no-repeat 0 bottom; } ul.drop li.products ul li.last { background: none; } ul.drop li.products { margin: 0 0 0 -3px; width: 186px; height: 49px; } ul.drop li.products .active, ul.drop li.products .active:hover { background: transparent url(/images/nav/mainnav_products-active.png) no-repeat 0 0; height: 48px; } ul.drop li.products .drop-hover:hover { background: transparent url(/images/nav/mainnav_products-hover_new.png) no-repeat 0 0; height: 48px; }

.searchBox { position: absolute; top: 18px; left: 790px; z-index: 500; } .searchBox input.text { width: 122px; border: 0; color: #999; } .searchBox input.butn { width: 10px; height: 10px; }