Sto realizzando un menu con div a comparsa molto simile a questo:
http://www.zaum.co.uk/about.htm

Non sto usando nessuno script per l'effetto hover ma sto realizzando tutto con i CSS.

L'effetto hover l'ho realizzato utilizzando una sola immagine.
Con la proprieta background-position poi ho estrapolato delle porzioni della stessa immagine posizionandole per dare l'effetto hover desiderato.

Il problema sta nel fatto che non riesco ad applicare l'effetto del div a comparsa a tutte e due le parti di immagini.

Infatti cliccando sul link per avere l'effetto del div a comparsa ciò che si sposta verso il basso per far spazio al testo sono solo le parti di immagini posizionate con background-position che fungono da "hover".

Non riesco infatti ad applicare lo stesso procedimento alla parte dell' immagine che dovrebbe fungere da menù fisso.







codice:
#container{
    background-repeat:no-repeat;
	margin:0 auto;
	padding:20px 0 0 0;
	width:950px;
	height:550px;}
	
	#menu {
height:154px;
margin:0 auto;
position:absolute;
width:500px;

}



#navigation {
	position:absolute;
	display: block;
	width: 400px;
	height: 593px;
	background:url(IMAGE/navigation_FORM.png) left top no-repeat;
}

#navigation li {
	display: block;
	float: left;
	margin:0 0 0 -50px;
	padding:0 52px 0 0;
}

#navigation li a {
	display: block;
	height:93px;
	text-indent:-9999px;
	outline:none;
}
#navigation li a:hover
{
	background-image:url(IMAGE/navigation_FORM.png);
	background-repeat:no-repeat;
	outline:none;
}











#navigation li.web a {
background-position:-439px 0;
height:63px;
width:459px;
}

#navigation li.css a {
	background-position:-439px -85px;
    height:63px;
    width:459px;
    outline:none;
}

#navigation li.seo a {
background-position:-439px -165px;
height:63px;
margin:-15px 0 0 0;
width:459px;
}

#navigation li.usabilita a {
background-position:-439px -250px;
height:63px;
margin:0;
width:459px;
}

#navigation li.logo a {
background-position:-439px -320px;
height:63px;
margin:-15px 0 0;
width:459px;
}
	
#navigation li.illustrazioni a {
background-position:-439px -405px;
height:63px;
margin:0;
width:459px;
}

codice:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento senza titolo</title>
<link href="hover_img.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jquery-1.3.2.js"></script> 
<script type="text/javascript" src="jquery.easing.1.3.js"></script> 
<script type="text/javascript"> 
$(function(){ 
  $("ul#navigation li ul").hide(); 
  $("ul#navigation>li>a").click(function() { 
      $(this).addClass("current"); 
      var $subnav = $(this).next(); 
        if($subnav.is(":visible")) { 
        $subnav.animate({height: "toggle"}, 750, "easeOutBounce").prev().removeClass("current"); 
        } 
        if(!$subnav.is(":visible")) { 
        $("ul#navigation li ul:visible").animate({height: "toggle"}, 750, "easeInBounce").prev().removeClass("current"); 
        $subnav.animate({height: "toggle"}, 750, "easeInOutExpo"); 
        } 
        return false; 
    }); 
}); 
</script> 
</head>

<body>
<div id="container">
<div id="menu">
<ul id="navigation">
			<li class="web">
                   <ul> 
            

Un sito è il biglietto da visita piu importante per un'azienda, 
per questo deve rispecchiare chi siamo e cosa abbiamo da dire
 nel miglior modo possibile.

Estremamente utile è il brief, ovvero la fase in cui si devono cogliere tutti
 gli elementi utili per fornire al cliente un prodotto adatto alle proprie esigenze 
che rappresenti al meglio l'identità dell'azienda.


Quando si sviluppa un sito internet,bisogna esser certi che sia innovativo
 sia dal punto di vista creativo che della struttura, seguendone attivamente
tutte le fasi di sviluppo del progetto.
Gli obiettivi principali quindi rimangono le esigenze del cliente
necessarie per lo sviluppo di un prodotto efficace.
Vuoi saperne di piu? compila la form qui affianco.</p> 
 [/list]
      
        
			<li class="css">
			<li class="seo">
            <li class="usabilita">
            <li class="logo">
            <li class="illustrazioni">[/list]
</div>

</div>
            
</body>
</html>