Quicksand filter clashing with dropdown code
I'm relatively new to this and have had no problem editing an customising filters in the past but I can't get these two to work together. I have a hoverover dropdown menu and I also need a filter on the same page. The two don't work together until I have clicked on a filter then they both work as normal. Until then the website is misaligned and not working. Does anyone know how to get them to both work from the start?
This is the problem page:
http://clinell.com/design/carell/test/portfolio.html
This is another page without the quicksand filter that works fine:
http://clinell.com/design/carell/packs
This is how my header looks:
- <head>
<link rel="stylesheet" href="style.css" type="text/css" media="screen"/>
<script type="text/javascript" src="style/js/ddsmoothmenu.js"></script>
<script type="text/javascript" src="style/js/jquery-1.5.min.js"></script>
<script type="text/javascript" src="style/js/quicksand.js"></script>
<script type="text/javascript" src="style/js/portfolio.js"></script>
<script type="text/javascript" src="style/js/jquery.prettyPhoto.js"></script>
<script type="text/javascript" src="style/js/scripts.js"></script>
<script type="text/javascript">
$(function() {
var d=300;
$('#navigation a').each(function(){
$(this).stop().animate({
'marginTop':'-40px'
},d+=150);
});
$('#navigation > li').hover(
function () {
$('a',$(this)).stop().animate({
'marginTop':'-10px'
},500);
},
function () {
$('a',$(this)).stop().animate({
'marginTop':'-40px'
},200);
}
);
});
</script>
</head>
Any help would be so much appreciated!