Image arrière plan étirable avec menu déroulant “accordéon”

Bonjour,
j'ai mis en place un menu déroulant sur mon site ( http://www.sesne.fr/). Aucun soucis de ce coté. Mais voila je voudrais changer le design du site (qui est pour l'instant très basique par faute de temps à l'époque de faire mieux...). Je voudrais mettre une bordure qui engloberait tout le menu (qui bien sur n'est pas rectangulaire...) et qui donc va s'étirer lorsqu'un sous-menu s'ouvre. Donc j'ai pensé mettre une image en background mais dans ce cas ce n'est pas possible de faire un height 100%.
J'ai vu sur un tuto comment faire un background étirable mais je n'arrive pas à le mettre en place dans le cas de mon menu.

Pouvez vous m'aider?

Pour mieux comprendre, j'ai mis (j'espère que ca a marché) l'image que je souhaiterais mettre en "background".

Voici ce que j'ai essayé ,

 <style type="text/css">
<!--
html, body {
margin:0;
padding:0;


}
#arriere {
	background-color:#00CC00;
	position: absolute;	/* dimension et positionnement du bloc conteneur  de l'image */
	left: 10em;
	top: 5em;
	height : 325px;
	width : 124px;
}
#arriere img {
/* l'image occupe toute la longueur de son bloc conteneur */

height: 100%;
}
#arriere p {
	position: absolute;	/* placement du texte par-dessus l'image */
	top: 45px;
	left: 2px;
	font-size: 0.5em;
	color: white;
	height: 105px;
	width:117px;
}
.Style1 {
	font-size: small
}

#arriere
{
background:url(image/cadre_menu.png)#00CCFF no-repeat top left;
background-color:#00CCFF;

}


.navigation { 
      margin: 0;
      padding: 0; 
      list-style: none; 
      width: 230px; 
      font: 1.2em "Verdana", sans-serif; 	  
	  float:left;
	  margin-top:15px;
	  position: absolute;
	  line-height: 50px;
      } 
	  
   .navigation a, .navigation span { 
      display: block; 
      padding: 4px 10px; 
      color:#000000; 
      text-decoration: none; 
      
	
      } 
	  
   .navigation .toggleSubMenu a, .navigation .toggleSubMenu span 
   { 
      
	   
      } 
	  
   .navigation .open a, .navigation .open span 
   { 
      
	  
      }
	  
   .navigation a:hover, .navigation a:focus, .navigation a:active 
   { 
      text-decoration: underline; 
      } 
	  
   .navigation .subMenu { 
      font-size: .8em; 
      list-style: none;  
      font-size: .9em; 
      margin: 0; 
      padding: 0; 
      } 
	  
   .navigation ul.subMenu a { 
      
      padding: 3px 20px; 
	  
      }
	  
-->
</style>

<!--le_menu-->

<ul class="navigation"> 
<div id="arriere"><img alt="bidule" src="cadre_menu.png"/>
<li class="toggleSubMenu"><span>Association</span> 
  
       <ul class="subMenu"> 
            <li><a href="presentation.html" title="Aller à la presentation">Présentation</a></li> 
            <li><a href="activites.html"title="Aller à la page activites">Activités</a></li> 
            <li><a href="historique.html"title="Aller à la page historique">Historique</a></li> 
            <li><a href="adhesion.html" title="Aller à la page adhesion">Adhésion</a></li> 
 
    </ul> 
  </li> 
  
  
<li class="toggleSubMenu"><span>Disciplines</span> 
        
       <ul class="subMenu"> 
 
            <li><a href="botanique.html"title="Aller à la page botanique">Botanique</a></li> 
            <li><a href="entomologie.html" title="Aller à la page Entomologie">Entomologie</a></li> 
            <li><a href="mammalogie.html" title="Aller à la page Mammalogie">Mammalogie</a></li> 
            <li><a href="mycologie.html"title="Aller à la page Mycologie">Mycologie</a></li>  
            <li><a href="ornithologie.html"title="Aller à la page Ornithologie">Ornithologie</a></li> 
            <li><a href="Sciences de la terre.html" title="Aller à la page Sciences de la Terre">Sciences de la Terre</a></li> 
    </ul> 
  </li>

       
  <li><a href="photos.html" title="Aller à la page Album Photos">Album Photos</a></li> 
  <li><a href="bulletin.html" title="Aller à la page Bulletin">Bulletin</a></li> 
   
<li class="toggleSubMenu"><span>Outils</span> 
        
        <ul class="subMenu"> 
             <li><a href="telechargement.html"title="Aller à la page Téléchargement">Téléchargement</a></li> 
            <li><a href="animation.html" title="Aller à la page Animation">Animation</a></li> 
        </ul> 
</li> 
 
 
    <li><a href="liens.html" title="Aller à la page Liens">Liens</a></li>
  
 
</ul></div>

Du coup avec ça l'iamge n'est pas en "background" et le menu ne fonctionne plus...

Ah désolée, j'ai tellement essayé des trucs, qu'il y a pleins de trucs qui ne servent plus à rien dans le CSS.
Je vous remercie pour vos réponses

Bonjour, la structure que tu essais de faire avec ton menu et ton image n'est pas valide.

As-tu essayé de mettre ton image en background sur ton ul.navigation ?

Oui j'ai vu que ce n'était pas valide mais je comprends pas pourquoi? Ceci dit y a que comme ça que le CSS fonctionne parce que si je fait :

<div id="arriere"><img alt="bidule" src="cadre_menu.png"/>
<ul class="navigation"> 
....</ul> </div>

aucun style ne s'applique à #arriere et les sous menu ne s'ouvrent plus ??? Quelle conséquence cela a le fait que le code ne soit pas valide?

Le problème c'est que si je mets l'image en background, je ne peux pas lui appliquer un height à 100% .

Et faire ça ne donne rien non plus

#arriere img {

/* l'image occupe toute la longueur de son bloc conteneur */



height: 100%;

}

Ca doit etre une histoire de sémantique mais je voits pas...

En tout cas merci pour la réponse Melba

Euh pardon Merci Mabelle

loulaute a écrit :
Quelle conséquence cela a le fait que le code ne soit pas valide?

Laurent Denis a écrit :
Les styles CSS, on l'ignore trop souvent, ne sont en effet pas appliqués au code HTML que vous avez écrit, mais au code tel qu'il a été interprété et corrigé par le navigateur, qui s'efforcera de rétablir un code valide et donc utilisable.

Lire tout cet article Valider ? Pour quoi faire concrètement ?

Ceci étant dit, j'ai un peu de difficulté à visualiser ce que tu cherches à faire.

loulaute a écrit :
Le problème c'est que si je mets l'image en background, je ne peux pas lui appliquer un height à 100% .

Ton image que tu veux mettre en background, elle a l'air de quoi ?

Bon voila ce que je voudrais faire : integrer mon menu déroulant comme sur http://www.sesne.fr/ à ce graphisme, donc au bloc menu à gauche sur cette image


Donc le cadre doit s'étirer lorsqu'un sous menu va s'ouvrir.

Mais il y a peut etre un autre moyen, plus simple...