/*
============================================================
	Ejemplo 01
============================================================

....................................
	HTML
....................................

	<ul id="ejemplo01">
		<li><a href="" title="item1">item1</a></li>
		<li><a href="" title="item2">item2</a></li>
		<li><a href="" title="item3">item3</a></li>
		<li><a href="" title="item4">item4</a></li>
		<li><a href="" title="item5">item5</a></li>
		<li><a href="./pag01.css" title="ver el xhtml y css">ver código</a></li>
	</ul>

.....................................
	CSS
.....................................
*/


#ejemplo01 {
	list-style: none;
	border-bottom: 1px solid #35A1D8;
}
#ejemplo01 li {	
	border: 1px solid #35A1D8;
	border-bottom: none;
	list-style: none;
	display: inline;
	padding: 0px 5px 0px 7px;
	margin: 0px 0px 0px 5px;
}
#ejemplo01 li a {
	color: 	#35A1D8;
	font-weight: bold;
}
#ejemplo01 li:hover {	
	border: 1px solid #35A1D8;
	background: #35A1D8;
	border-bottom: none;
	list-style: none;
	display: inline;
	padding: 0px 5px 0px 7px;
	margin: 0px 0px 0px 5px;
}
#ejemplo01 li:hover a {	
	color: #fff;
}
#ejemplo01 li a:hover {
	color: 	#fff;
	font-weight: bold;
	text-decoration: none;
}



/*
============================================================
	Ejemplo 02
============================================================

....................................
	HTML
....................................

	<ul id="ejemplo02">
		<li><a href="" title="item1">item1</a></li>
		<li><a href="" title="item2">item2</a></li>
		<li><a href="" title="item3">item3</a></li>
		<li><a href="" title="item4">item4</a></li>
		<li><a href="" title="item5">item5</a></li>
		<li><a href="./pag01.css" title="ver el xhtml y css">ver código</a></li>
	</ul>

.....................................
	CSS
.....................................
*/


#ejemplo02 {
	list-style: none;
	border-bottom: 1px solid #9DAC93;
}
#ejemplo02 li {	
	border: 1px solid #9DAC93;
	border-bottom: none;
	list-style: none;
	display: inline;
	padding: 0px 5px 0px 7px;
	margin: 0px 0px 0px 5px;
}
#ejemplo02 li a {
	color: 	#9DAC93;
	font-weight: bold;
}
#ejemplo02 li:hover {	
	border: 1px solid #9DAC93;
	background: #9DAC93;
	border-bottom: none;
	list-style: none;
	display: inline;
	padding: 0px 5px 0px 7px;
	margin: 0px 0px 0px 5px;
}
#ejemplo02 li:hover a {	
	color: #fff;
}
#ejemplo02 li a:hover {
	color: 	#fff;
	font-weight: bold;
	text-decoration: none;
}




/*
============================================================
	Ejemplo 03
============================================================

....................................
	HTML
....................................

	<ul id="ejemplo03">
		<li><a href="" title="item1">item1</a></li>
		<li><a href="" title="item2">item2</a></li>
		<li><a href="" title="item3">item3</a></li>
		<li><a href="" title="item4">item4</a></li>
		<li><a href="" title="item5">item5</a></li>
		<li><a href="./pag01.css" title="ver el xhtml y css">ver código</a></li>
	</ul>

.....................................
	CSS
.....................................
*/


#ejemplo03 {
	list-style: none;
	border-bottom: 1px solid #9DAC93;
	border-top: 1px solid #9DAC93;
	background: #9DAC93;
}
#ejemplo03 li {	
	border: 1px solid #9DAC93;
	border-bottom: none;

	list-style: none;
	display: inline;
	padding: 0px 5px 0px 7px;
	margin: 0px 0px 0px 5px;
}
#ejemplo03 li a {
	color: 	#fff;
	font-weight: bold;
}
#ejemplo03 li:hover {	
	border: 1px dashed #fff;
	border-top: 1px solid #fff;
	border-bottom: 1px solid #fff;
	background: #9DAC93;
	list-style: none;
	display: inline;
	padding: 0px 5px 0px 7px;
	margin: 0px 0px 0px 5px;
}
#ejemplo03 li a:hover {
	color: 	#fff;
	font-weight: bold;
	text-decoration: none;
}


/*
============================================================
	Ejemplo 04
============================================================

....................................
	HTML
....................................

	<ul id="ejemplo03">
		<li><a href="" title="item1">item1</a></li>
		<li><a href="" title="item2">item2</a></li>
		<li><a href="" title="item3">item3</a></li>
		<li><a href="" title="item4">item4</a></li>
		<li><a href="" title="item5">item5</a></li>
		<li><a href="./pag01.css" title="ver el xhtml y css">ver código</a></li>
	</ul>

.....................................
	CSS
.....................................
*/


#ejemplo04 {
	list-style: none;
	border-bottom: 2px solid #FF9955;
	border-top: 1px solid #FDB27F;
	background: #FDB27F;
}
#ejemplo04 li {	
	border-bottom: none;
	list-style: none;
	display: inline;
	padding: 0px 5px 0px 7px;
	margin: 0px 0px 0px 5px;
}
#ejemplo04 li a {
	color: 	#fff;
	font-weight: bold;
}
#ejemplo04 li:hover {	
	border-bottom: 1px solid #FF9955;
	background: #fff;
	list-style: none;
	display: inline;
	padding: 0px 5px 0px 7px;
	margin: 0px 0px 0px 5px;
}
#ejemplo04 li:hover a {	
	color: #FF9955;
}
#ejemplo04 li a:hover {
	color: 	#FF9955;
	font-weight: bold;
	text-decoration: none;
}