/* Kindly inspired from: */ /* http://www.alistapart.com/articles/slidingdoors2/ */ /* To use, add the following code in the page :

Also define the following css inline : #home #nav-home, #news #nav-news, #products #nav-products, #about #nav-about, #contact #nav-contact { background-position:0 -150px; border-width:0; } #home #nav-home a, #news #nav-news a, #products #nav-products a, #about #nav-about a, #contact #nav-contact a { background-position:100% -150px; padding-bottom:5px; color:#333; } */ #tabs_navigation_container { width:100%; background:#FFFFFF url("bg.gif") repeat-x bottom; } #tabs_navigation { width:100%; float:left; font-size:100%; line-height:normal; } #tabs_navigation ul { margin:0; padding:10px 10px 0; list-style:none; } #tabs_navigation li { float:left; background:url("left_both.gif") no-repeat left top; margin:0; padding:0 0 0 9px; } #tabs_navigation a { float:left; display:block; width:.1em; background:url("right_both.gif") no-repeat right top; padding:10px 15px 4px 6px; text-decoration:none; font-weight:bold; color:#000; } #tabs_navigation > ul a {width:auto;} /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs_navigation a {float:none;} /* End IE5-Mac hack */ #tabs_navigation a:hover { color:#FFF; } #tabs_navigation li:hover, #tabs_navigation li:hover a { background-position:0% -150px; color:#FFF; } #tabs_navigation li:hover a { background-position:100% -150px; }