<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head profile="http://gmpg.org/xfn/11"> <title>Tetris Menu</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta name="description" content="" /> <meta name="keywords" content="" /> <style type="text/css" media="screen"> ul { padding: 0; margin: 0; line-height:1.6em; } /* Navigation, disjointed rollovers to produce image map effect */ /*Home navigation */ #home_navigation { background: url(img/tetris-menu-horizontal.gif); list-style: none; height: 148px; width: 646px; overflow: hidden; position: relative; } #home_navigation li { float: left; } #home_navigation a { font-size: 2px; text-align: center; height: 48px; width: 100px; float: left; display: inline; position: relative; color: #e9f3de !important; } #home_navigation a span { width: 100px; height: 48px; position: absolute; color: #e9f3de; cursor: pointer; cursor: hand; } #home_navigation a:hover, #home_navigation a:hover span { background: url(img/tetris-menu-horizontal.gif) no-repeat 0 -148px; color: #3b382e !important; } #home_navigation #nav_what a { margin-left: 48px; } #home_navigation #nav_what a span { width: 98px; top: 48px; left: -48px; } #home_navigation #nav_who a { left: -48px; margin: 48px -46px 0 0; height: 50px; } #home_navigation #nav_who a span { width: 50px; height: 148px; top: -50px; left: 50px; } #home_navigation #nav_people a { margin-top: 50px; width: 98px; } #home_navigation #nav_people a span { width: 50px; height: 148px; top: -50px; left: 0; } #home_navigation #nav_contact a { margin-left: 48px; } #home_navigation #nav_contact a span { top: 48px; left: -50px; } #home_navigation #nav_how a { margin: 100px -150px 0 0; width: 150px; left: -150px; } #home_navigation #nav_how a span { width: 50px; height: 100px; top: -50px; left: 100px; } #home_navigation #nav_case a { width: 146px; } #home_navigation #nav_case a span { width: 50px; height: 98px; top: 0; left: 0; } #home_navigation #nav_news a { margin: 50px -50px 0 0; left: -48px; height: 50px; } #home_navigation #nav_news a span { top: 50px; left: -50px; } #home_navigation #nav_what a:hover { background-position: -48px -148px; } #home_navigation #nav_what a:hover span { background-position: 0 -196px; } #home_navigation #nav_who a:hover { background-position: -100px -196px; } #home_navigation #nav_who a:hover span { background-position: -150px -146px; } #home_navigation #nav_people a:hover { background-position: -202px -198px; } #home_navigation #nav_people a:hover span { background-position: -202px -148px; } #home_navigation #nav_contact a:hover { background-position: -348px -148px; } #home_navigation #nav_contact a:hover span { background-position: -298px -196px; } #home_navigation #nav_how a:hover { background-position: -298px -248px; } #home_navigation #nav_how a:hover span { background-position: -398px -198px; } #home_navigation #nav_case a:hover { background-position: -448px -148px; } #home_navigation #nav_case a:hover span { background-position: -448px -148px; } #home_navigation #nav_news a:hover { background-position: -546px -198px; } #home_navigation #nav_news a:hover span { background-position: -496px -248px; } /* Sub page navigation */ #navigation { background: url(img/tetris-menu-vertical.gif) no-repeat 0px 0px; list-style: none; width: 146px; height: 496px; position: relative; } #navigation a { overflow: hidden; display: block; padding-top: 50px; height: 0; } #navigation a span { position: absolute; cursor: pointer; cursor: hand; } #navigation a:hover, #navigation a:hover span, #navigation a.selected, #navigation a.selected span { background: url(img/tetris-menu-vertical.gif) no-repeat -146px 0; } #navigation #nav_what a { margin-left: 48px; padding-top: 48px; height: 0; } #navigation #nav_what a span { width: 98px; height: 50px; top: 48px; left: 0; } #navigation #nav_who { margin: 50px 0 0 48px; } #navigation #nav_who a span { width: 48px; height: 150px; top: 48px; right: 0; } #navigation #nav_people a { margin-right: 48px; } #navigation #nav_people a span { width: 48px; height: 148px; top: 98px; left: 0; } #navigation #nav_contact { margin-left: 48px; } #navigation #nav_contact a span { width: 96px; height: 48px; top: 248px; left: 0; } #navigation #nav_how a { margin-top: 50px; width: 146px; } #navigation #nav_how a span { width: 48px; height: 96px; top: 250px; right: 0; } #navigation #nav_case a { width: 146px; } #navigation #nav_case a span { width: 48px; height: 96px; top: 350px; left: 0; z-index: 2; } #navigation #nav_news { margin-left: 48px; } #navigation #nav_news a span { width: 98px; height: 48px; top: 448px; left: 0; } #navigation #nav_what a:hover, #navigation #nav_what a.selected { background-position: -194px 0; } #navigation #nav_what a:hover span, #navigation #nav_what a.selected span { background-position: -146px -48px; } #navigation #nav_who a:hover, #navigation #nav_who a.selected { background-position: -194px -98px; } #navigation #nav_who a:hover span, #navigation #nav_who a.selected span { background-position: -244px -48px; } #navigation #nav_people a:hover, #navigation #nav_people a.selected { background-position: -146px -148px; } #navigation #nav_people a:hover span, #navigation #nav_people a.selected span { background-position: -146px -98px; } #navigation #nav_contact a:hover, #navigation #nav_contact a.selected { background-position: -194px -198px; } #navigation #nav_contact a:hover span, #navigation #nav_contact a.selected span { background-position: -146px -248px; } #navigation #nav_how a:hover, #navigation #nav_how a.selected { background-position: -146px -298px; } #navigation #nav_how a:hover span, #navigation #nav_how a.selected span { background-position: -244px -250px; } #navigation #nav_case a:hover, #navigation #nav_case a.selected { background-position: -146px -348px; } #navigation #nav_case a:hover span, #navigation #nav_case a.selected span { background-position: -146px -350px; } #navigation #nav_news a:hover, #navigation #nav_news a.selected { background-position: -194px -398px; } #navigation #nav_news a:hover span, #navigation #nav_news a.selected span { background-position: -146px -448px; } </style> </head> <body> <h2>Horizontal Menu</h2> <ul id="home_navigation"> <li id="nav_what"><a href="#" >What we do<span id="span_what"></span></a></li> <li id="nav_who"><a href="#" >Who we are<span id="span_who"></span></a></li> <li id="nav_people"><a href="#" >Our people<span id="span_people"></span></a></li> <li id="nav_contact"><a href="#" >Contact us<span id="span_contact"></span></a></li> <li id="nav_how"><a href="#" >How can we help you?<span id="span_how"></span></a></li> <li id="nav_case"><a href="#" >Case studies<span id="span_case"></span></a></li> <li id="nav_news"><a href="#" >News &amp; links<span id="span_news"></span></a></li> </ul> <h2>Vertical Menu</h2> <ul id="navigation"> <li id="nav_what"><a href="http://www.constructlaw.com.au/what-we-do/" class="selected">What we do<span id="span_what"></span></a></li> <li id="nav_who"><a href="http://www.constructlaw.com.au/who-we-are/" >Who we are<span id="span_who"></span></a></li> <li id="nav_people"><a href="http://www.constructlaw.com.au/our-people/" >Our people<span id="span_people"></span></a></li> <li id="nav_contact"><a href="http://www.constructlaw.com.au/contact-us/" >Contact us<span id="span_contact"></span></a></li> <li id="nav_how"><a href="http://www.constructlaw.com.au/how-can-we-help-you/" >How can we help you?<span id="span_how"></span></a></li> <li id="nav_case"><a href="http://www.constructlaw.com.au/case-studies/" >Case studies<span id="span_case"></span></a></li> <li id="nav_news"><a href="http://www.constructlaw.com.au/news-links/" >News &amp; links<span id="span_news"></span></a></li> </ul> </body> </html>