CSS Hover ile İlgili Bir Sıkıntı

Merhaba arkadaşlar. ul li ile yapılmış bir menüm var. Menünün kenarları yuvarlatılmış bir şekilde. Hover etkisi ile üzerine gelince de her tarafı yuvarlaklaşıyor. Benim yapmak istediğim ilk li'nin sadece sol tarafı son li'nin sadece sağ tarafı yuvarlaklaşsın diğerleri normal olsun istiyorum.

Tam olarak istediğim şey şu resimdeki gibi. Koyu renk hover'ı temsil ediyor.

.navbar {
	width: 976px;
	margin-right: auto;
	margin-left: auto;
	background-color: #95A5A6;
	border-right-width: 2px;
	border-bottom-width: 2px;
	border-left-width: 2px;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-right-color: #7f8c8d;
	border-bottom-color: #7f8c8d;
	border-left-color: #7f8c8d;
	-webkit-border-bottom-left-radius: 8px;
	-webkit-border-bottom-right-radius: 8px;
	overflow: hidden;
}
.navbar ul li {
	float: left;
}

 

Şu şekilde düzenler misin?
 

.navbar ul li a:first-child {border-radius: 0 0 0 10px; }
.navbar ul li a:last-child {border-radius: 0 0 10px 0; }
Cevap Yaz

Cevap yazabilmek için üye girişi yapmanız gerekiyor!

Yukarı Git