zevilz,
непонятно что за проблему вы решаите ...
просто немного сократил ваш код ...
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style>
ul {
margin: 0;
text-align: left;
}
ul.menu {
margin-left: .5em;
margin-bottom: 1em;
}
ul.menu li {
list-style-type: none;
display: inline-block;
font-weight: bold;
text-shadow: 1px 1px 0px #f3f5da;
padding: 2px 15px;
}
.selected {
-webkit-border-radius: 15px;
-moz-border-radius: 5px;
border-radius: 5px;
background: #acac75;
-webkit-box-shadow: 1px 1px 0px #8c8c5d;
}
.selected a, .selected a:visited {
text-shadow: 1px 1px 0px #8c8c60;
color: #fff;
}
ul.item li {
list-style-type: none;
display: block;
float: left;
margin: .5em;
}
ul.item li img {
border: 5px solid #fff;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0px 0px 5px #ac987e;
-moz-box-shadow: 0px 0px 5px #ac987e;
box-shadow: 0px 0px 5px #ac987e;
}
a, a:visited {
color: #161616;
text-decoration: none;
}
</style>
</head>
<body>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
var mli = $('.menu li'), ili = $('.item li');
mli.click(function()
{
mli.removeClass('selected');
$(this).addClass('selected');
var imgWidth = '52px',
thisItem = $('a', this).attr('rel');
ili.stop().animate(
{'width': 0, 'opacity': 0,
'marginRight': 0,
'marginLeft': 0
}
).filter('[rel~="'+thisItem+'"]').animate(
{'width': imgWidth,
'opacity': 1,
'marginRight': '.5em',
'marginLeft': '.5em'
}
);
;
}
)
$('img', ili).animate({'opacity': 0.5}).hover(function()
{
$(this).animate({'opacity': 1});
}, function() {
$(this).animate({'opacity': 0.5});
}
);
}
);
</script>
<ul class="menu">
<li class="selected"><a href="#" rel="all">Все уроки</a></li>
<li><a href="#" rel="jquery">jQuery</a></li>
<li><a href="#" rel="css">CSS</a></li>
<li><a href="#" rel="php">PHP</a></li>
</ul>
<ul class="item">
<li rel="jquery all"><a href="" target="_blank"><img src="rhttgbh" /></a></li>
<li rel="jquery all"><a href="" target="_blank"><img src="edhdethg" /></a></li>
<li rel="css all"><a href="" target="_blank"><img src="hetrheth" /></a></li>
<li rel="css all"><a href="" target="_blank"><img src="rthrtg" /></a></li>
<li rel="php all"><a href="" target="_blank"><img src="ethetrh" /></a></li>
<li rel="jquery all"><a href="" target="_blank"><img src="hetr" /></a></li>
<li rel="css all"><a href="" target="_blank"><img src="werhewrt" /></a></li>
<li rel="php all"><a href="" target="_blank"><img src="wtrhwetr" /></a></li>
</ul>
</body>
</html>