אפקט מנורת לבה

<div id="main-nav">
	          <h2 class="primary-links-title">Primary Links</h2>
	          <ul class="menu primary-links">
<li class="menu-1092 active-trail first active">
<a href="/" title="" class="active">בית</a>
</li>
<li class="menu-825">
<a href="/discussions" title="כל הדיונים בפורום">פורום</a>
</li>
<li class="menu-828">
<a href="/posts" title="כל הפוסטים בבלוג">בלוג</a>
</li>
 
<li class="menu-905">
<a href="/events" title="כל האירועים">אירועים</a>
</li>
<li class="menu-1591 last">
<a href="/providers" title="ספקי שירות">ספקי שירות</a>
</li>
</ul>
	        </div>
<!-- /main-nav -->

//the lavalamp load:
function loadLamps() {
	$('.lamp').lavaLamp({
		fx: 'easeOutBounce',
		speed: 1000
	});
}
//jquery initialize:
$(function() {
	$('#main-nav').addClass('lamp');
	loadLamps();
});

.lamp {
	position: relative;
	overflow: hidden;
}
.lamp li {
	float: left;
	list-style: none;
}
.lamp li.backLava {
	background-color:#eee;
	width: 9px;
	z-index: 8;
	position: absolute;
	-moz-border-radius:8px;
	-webkit-border-radius:8px;
	border-radius:8px;
}
.lamp li a {
	outline: none;
	text-align: center;
	padding: 5px 10px;
	letter-spacing: 0;
	z-index: 10;
	display: block;
	float: left;
	position: relative;
	overflow: hidden;
	margin: auto;
}