Docstoc

CSS Navigation bar

Document Sample
CSS Navigation bar Powered By Docstoc
					<style> #tabs5 img { border: none; } #tabs5 { float:left; width:100%;
background:#E3ECF3; font: bold 7.5pt Verdana; line-height:normal; }
#tabs5 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs5
li { display:inline; margin:0; padding:0; } #tabs5 a { float:left;
background:url(http://1.bp.blogspot.com/_7wsQzULWIwo/Szu-
pihZsRI/AAAAAAAACuM/M_WqlslWGI0/s1600/tableft5.gif) no-repeat left top;
margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs5 a span {
float:left; display:block;
background:url(http://3.bp.blogspot.com/_7wsQzULWIwo/Szu-
ppvYxHI/AAAAAAAACuQ/aL8WsHpvlSo/s1600/tabright5.gif) no-repeat right top;
padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides
rule from IE5-Mac \*/ #tabs5 a span {float:none;} /* End IE5-Mac hack */
#tabs5 a:hover span { color:#FFF; } #tabs5 a:hover { background-
position:0% -42px; } #tabs5 a:hover span { background-position:100% -
42px; } #tabs5 #current a { background-position:0% -42px; } #tabs5
#current a span { background-position:100% -42px; } </style> <div
id="tabs5">
 <ul>
<li><a href="#"><span>Link 1</span></a></li>
<li><a href="#"><span>Link 2</span></a></li>
<li><a href="#"><span>Link 3</span></a></li>
<li><a href="#"><span>Link 4</span></a></li>
<li><a href="#"><span>Link 5</span></a></li>
<li><a href="#"><span>Link 6</span></a></li>
<li><a href="#"><span>Link 7</span></a></li>
</ul>
</div>

				
DOCUMENT INFO
Shared By:
Categories:
Tags: Navigation
Stats:
views:0
posted:1/28/2013
language:
pages:1