<!DOCTYPE html>
<html>
<head>
<style>
#navigation {
height:100px;
}
#navigation ul {
height: 2em;
padding-left:100px;
font-family:"Arial Black", Gadget, sans-serif;
font-size:18px;
list-style: none;
}
#navigation li {
float:left;
margin-right: 1em;
}
#navigation a {
padding-left:25px;
padding-right:20px;
float:left;
line-height:20px;
font-weight: bold;
text-decoration: none;
color: #000;
}
#fl{
background-image:url(image/fl.png);
background-repeat:no-repeat;
width:20px;
height:27px;
position: relative;
}
</style>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$('li', '#navigation').each(function() {
var $li = $(this);
var $a = $('a', $li);
var width = $li.width();
var left = $li.position().left;
$('#fl', '#navigation').css({width: width, left:left});
$a.mouseover(function() {
$('#fl', '#navigation').animate({
width: width,
left: left
}, 'slow');
});
});
});
</script>
</head>
<body>
<div id="navigation">
<ul>
<li><a href="#"><strong>درباره ما</strong></a></li>
<li><a href="#"><strong>تماس با ما</strong></a></li>
<li><a href="#"><strong>کمپوست</strong></a></li>
<li><a href="#"><strong>ورمی کمپوست</strong></a></li>
<li><a href="#"><strong>گالری</strong></a></li>
</ul>
<div id="fl">fdffffff</div>
</div>
</body>
</html>