menu horizontal con css...

[marisolivier]

estoy haciendo un menu horizontal con css de esta forma:

el css:

Código:

#menu{
	width:100%;
	height: 22px;
	background-color : #d7d4a9;
	margin-top : 12px;
	margin-bottom : 12px;
}
#navi02 {
	list-style:none;
	margin:0;
	padding:0
}
#navi02 li {
	float:left;
	border-left:1px solid #02636a;
	margin-top : 4px;
	margin-bottom : 4px;
	padding-left : 4px;
	padding-right : 4px;
}
#navi02 li a {
	display:block;
	text-decoration:none;
	color:#02636a;
	/*font-weight : bold;*/
}
#navi02 li a:hover {
	color:#99CC00;
}

el html:

Código:

<div id="menu">
				<ul id="navi02">
					<li><a href="#">1</a></li>
					<li><a href="#">2</a></li>
					<li><a href="#">3</a></li>
					<li><a href="#">4</a></li>
					<li><a href="#">5</a></li>
					<li><a href="#">6</a></li>
				</ul>
			</div>

ahora mi duda:

los <li> lleva un border-left:1px solid #02636a;, y necesito que este border NO aparezca en el 1º <li>...he probado con nav02 li.firstchild, nav02 li.firstitem...pero no va...

ayuda porfavorrrrrrrrrrrrrrrrrr...

[DragonX]

armate un class sin borde y aplicaselo al primero y listo.

[demiurgo_daemon]

Hola,

en realidad sería nav02 li:first-child (nota los dos puntos y el guión). Sin embargo, puede no servir en Explorer 6 e inferior (inferior en cuanto a versión, ya sabemos que no hay nada inferior a Explorer). Personalmente no me interesa, pero si a ti sí, la solución de DragonX va perfecta.

saludos

[DragonX]

#navi02 li:first-child{
border-left:none;
}