Bonjour,

Un petit appel au secours pour la modification du CCS menu, en effet je voudrais avoir un menu général déroulant du type "Unité/section"
avec le menu qui se déroule par le survol de la souris, afin d'avoir un menu un peu plus lisible

Malgré différents essai de modif du CCS, je n'y arrive pas

Exemple:

# Mouvement scout (affichage permanent sur le menu)
(la suite affichage par survol de "Mouvement scout" par la souris)
# Historique
# Vie Pastorale
# Anciens scouts
# Scouts & Guides

Merci par avance de votre aide

voir notre site

Bonjour Patrick,

Tu peux peut-être bien t'inspirer des tutoriaux CSS d'Alsacreations.

merci pour ta réponse, j'ai un peu galéré , mais j'ai fini par y arriver, alors je met a la disposition de ceux qui le souhaite le menu CCS que j'ai modifé:

Pour voir le résultat final clique ici

Code :

 /*
* 12/12/2005 - 22:40:00 - Scout Web Portail - v 1.1.1
*
* complet.css v 1.1 - Styles du menu par défaut du portail (liens triés par unité)
* Copyright (C) 2005 ChMat
* http://www.scoutwebportail.org
*
* This file is part of Scout Web Portail.
*/
/*
Structure du menu :
div id=menu

	a id=pseudo_membre
	ul id=menu_membre
	  li
	    a class=accueil profil gestion_unite pages_restreintes pages_sections forum_staffs
	ul id=menu_base
	  li
	    a class=accueil login inscription forum tally
	ul class=sections_unite (autant de listes que d'unités)
	  li class=section > nom d'une section
	  li class=unite > nom d'une unité
	    ul
		  li (class=aucun_lien)
		    a (class=new_lien)
	a id=gestion_menu

	ul id=menu_general

div id=menu_deroulant         

    
          
*/
#menu {
	float:left; width:140px; background: #E9D3C8 url('../../../templates/default/images/fond_menu.png') repeat-y; 
	border:1px #930 solid; border-left:0; border-top:0;}
#menu #pseudo_membre, #menu_membre .accueil {
	text-align:center; background-color:red;}
#menu ul {list-style-type: none; padding: 0; margin: 0;}
	#menu li, #menu_base li {margin:0; padding:0;}
#menu a {color: #FFF; display:block; text-decoration: none; text-align: center; padding-left: 0px;}
#menu_membre .accueil, #menu .sections_unite {margin-top: 3px;}
#menu #menu_membre {padding-bottom: 10px;}
#menu_base a.forum:before, #menu_base a.tally:before {content: ' ';}
#menu .unite, #menu .section, #menu_base, #menu #pseudo_membre, #menu_membre .accueil {
	font-weight: bold;}
#menu .unite {background-color: #663366;}
#menu .section {text-align: center; background-color: #008000;}
#menu #menu_general {margin-top: 1em;}
#menu .new_lien {padding-left:18px; background: url('../../../templates/default/images/plus.png') no-repeat 5px;}
#menu #gestion_menu {
	padding-left:18px; background: url('../../../templates/default/images/go.png') no-repeat 5px;}
#menu a.lienmort {text-align:center;}
#menu li a:hover, #menu #gestion_menu:hover {background-color:#FFFF00; color:#008000;display}
#bloc_connectes a { display:inline;}

 /*on definit la taille de la div du menu ainsi que la taille de parties du menu.*/
#menu_deroulant {
          width: 140px;
         }

div#menu ul {
             padding: 0;
             width: 140px;
             border:0px solid;
             margin:0px;
            }

/*On positionne les elements du menu */
#menu_deroulant ul li {
                position:relative;
                list-style: none; /*on enleve les icones de liste */
                border-bottom:0px solid; /*ajout d'une bordure de separation d'element:*/
               }

#menu_deroulant ul ul {
                position: relative;
                top: 0;
                left: 0px; /*100px correspond au décalage a droite, on décale de la taille du ul de base*/
               }  

#menu_deroulant li a {
               text-decoration: none; /* plus de soulignement pour les liens */
              } 
 /*fond vert pr les sous-menu*/
#menu_deroulant li.sousmenu {
                      background: green;
                     } 
/* On cache tous les sous menu avec la propriété display none */
#menu_deroulant ul ul {
                position: relative;
                top: 0;
                left: 0px;
                display:none
               }

/*Lors du survol ,avec la souris, les sousmenu apparaissent grace a display: block */
#menu_deroulant ul.niveau1 li.sousmenu:hover ul.niveau2,
#menu_deroulant ul.niveau2 li.sousmenu:hover ul.niveau3 {
                                                  display:block;
                                                 }

Bien sur il faudra modifier les couleurs et les images

En plus je mets en exemple le menu du site:

Code :

<ul id="menu_general">
</ul>
<ul id="menu_deroulantl">
<br>
<div id="menu_deroulant">
   <ul class="niveau1">
      <li class="sousmenu"><a href="http://deuxieme.mulhouse.free.fr/index.php?page=news"><img
 style="border: 0px solid ; width: 76px; height: 38px;" alt=""
 src="http://deuxieme.mulhouse.free.fr/templates/default/images/lesnews.gif" /"></a>
         <ul class="niveau2">
            <li class="sousmenu"><a href="http://deuxieme.mulhouse.free.fr/index.php?page=news">News</a>
            <li class="sousmenu"><a href="http://deuxieme.mulhouse.free.fr/index.php?page=calend">Agenda</a>
            <li class="sousmenu"><a href="http://deuxieme.mulhouse.free.fr/index.php?page=annif">Anniversaire</a>
               </ul>
            </li>
</ul>
</li>
<br>
   <ul class="niveau1">
      <li class="sousmenu"><b><a href="http://deuxieme.mulhouse.free.fr/index.php?niv=m">Mouvement scout</b></a>
         <ul class="niveau2">
            <li class="sousmenu"><a href="index.php?page=historique_general">Historique</a>
            <li class="sousmenu"><a href="index.php?page=vie_pastorale">Vie pastorale</a>
            <li class="sousmenu"><a href="index.php?niv=a">Anciens scouts</a>
            <li class="sousmenu"><a href="index.php?page=sgdf_kesako">Scouts & Guides</a>
               </ul>
            </li>
</ul>
</li>
<br>
   <ul class="niveau1">
      <li class="sousmenu"><b><a href="http://deuxieme.mulhouse.free.fr/index.php?niv=r">Archives du site</b></a>
         <ul class="niveau2">
            <li class="sousmenu"><a href="http://deuxieme.mulhouse.free.fr/index.php?page=fichiers&rub=10">Presse</a>
            <li class="sousmenu"><a href="http://deuxieme.mulhouse.free.fr/index.php?niv=r">Documents</a>
               </ul>
            </li>
</ul>
</li>
<br>
   <ul class="niveau1">
      <li class="sousmenu"><a href="index.php?page=lever_de_soleil"><object type="application/x-shockwave-flash" data="http://deuxieme.mulhouse.free.fr/videos/flvplayer.swf" width="135" height="100" />
  <param name="movie" value="http://deuxieme.mulhouse.free.fr/videos/flvplayer.swf" />
  <param name="flashvars" value="flv=http://deuxieme.mulhouse.free.fr/videos/leverdesoleilmenu.flv&margin=0&autoplay=1&width=135&height=100" />
  <param name="wmode" value="transparent" />
  <param name="menu" value="false" />
</object></a>
<li><center>1er août 2007</center></li>
            </li>
</ul>
</li>
<br>
   <ul class="niveau1">
      <li class="sousmenu"><b><a href="http://deuxieme.mulhouse.free.fr/index.php?niv=n">En plus...</b></a>
         <ul class="niveau2">
            <li class="sousmenu"><a href="http://deuxieme.mulhouse.free.fr/index.php?page=galerie">Photos & Vidéos</a>
            <li class="sousmenu"><a href="http://deuxieme.mulhouse.free.fr/index.php?page=musique">Musiques & Chansons</a>
<br>
            <li class="sousmenu"><a href="http://www.lachainemeteo.com/">Météo</a>
            <li class="sousmenu"><a href="http://deuxieme.mulhouse.free.fr/index.php?page=fichiers">Documents</a>
            <li class="sousmenu"><a href="http://deuxieme.mulhouse.free.fr/index.php?niv=u">Equipements</a>
            <li class="sousmenu"><a href="http://deuxieme.mulhouse.free.fr/index.php?page=liste_liens">Liens Internet</a>
            <li class="sousmenu"><a href="http://deuxieme.mulhouse.free.fr/index.php?page=liste_liens&categorie=lieu">Lieux de camps</a>
            <li class="sousmenu"><a href="http://www.laboutiqueduscoutisme.com">La boutique du scout</a>
<br>
            <li class="sousmenu"><a href="http://deuxieme.mulhouse.free.fr/index.php?page=morse">Morse</a>            
            <li class="sousmenu"><a href="http://deuxieme.mulhouse.free.fr/index.php?page=alphabet">Sémaphore</a>
            <li class="sousmenu"><a href="http://www.scoutopedia.net/index.php?title=Accueil">Scoutopédia</a>            
            <li class="sousmenu"><a href="http://deuxieme.mulhouse.free.fr/index.php?page=technique_des_noeuds">Technique des noeuds</a>
             </ul>
            </li>
</ul>
</li>
<br>
   <ul class="niveau1">
      <li class="sousmenu"><b><a href="http://www.latoilescoute.net/echanger/">Echanger</b></a>
         <ul class="niveau2">
            <li class="sousmenu"><a href="http://www.latoilescoute.net/jouer/">Jouer</a>
            <li class="sousmenu"><a href="http://www.latoilescoute.net/surfer/">Surfer</a>
            <li class="sousmenu"><a href="http://www.latoilescoute.net/discuter/">Discuter</a>
            <li class="sousmenu"><a href="http://gabbly.com/deuxieme.mulhouse.free.fr"><img
 style="border: 0px solid ; width: 24px; height: 24px;" alt=""
 src="http://deuxieme.mulhouse.free.fr/img/smileys/windows_live_messenger.gif" /"></a>
            <li class="sousmenu"><a href="http://www.latoilescoute.net/s-informer/">S'informer</a>
               </ul>
            </li>
</ul>
</li>
<br>
   <ul class="niveau1">
      <li class="sousmenu"><b><a href="index.php?niv=i">Le site</b></a>
         <ul class="niveau2">
            <li class="sousmenu"><a href="index.php?page=aide">Aide</a>
            <li class="sousmenu"><a href="index.php?page=listembsite">Membres</a>
            <li class="sousmenu"><a href="index.php?page=pagesectionmaj">Pages récente</a>
<br>
            <li class="sousmenu"><a href="index.php?page=reservations">Réservations</a>
            <li class="sousmenu"><a href="index.php?page=reservations">Gestion des finances</a>
<br>
            <li class="sousmenu"><a href="index.php?niv=i">A propos du site</a>
            <li class="sousmenu"><a href="index.php?page=fonction">Gestion du portail</a>

               </ul>
            </li>
</ul>
</li>
</div>
<br>
<ul id="menu_general">
<li><center>Signe notre</center></li>
<li><a href="http://deuxieme.mulhouse.free.fr/index.php?page=livreor"><img
 style="border: 0px solid ; width: 88px; height: 44px;" alt=""
 src="http://deuxieme.mulhouse.free.fr/img/smileys/livre_texte005.gif" /></a>
<br>
<li><center>Site optimisé pour:</center></li>
<li><a href="http://www.mozilla-europe.org/fr/"><img
 style="border: 0px solid ; width: 88px; height: 31px;" alt=""
 src="http://sfx-images.mozilla.org/affiliates/Buttons/firefox2/firefox-spread-btn-1b.png" /></a></li>
<br>
<li><a href="http://www.adobe.fr/"><img
 style="border: 0px solid ; width: 88px; height: 31px;" alt=""
 src="http://deuxieme.mulhouse.free.fr/img/Images_01/Adobe.gif" /></a></li>
</ul>
</ul>

Peut-être celà pourra-t-il aider d'autres à améliorer leur site

Cordialement

Patrick

Pour voir le résultat clique ici

[Edit : ChMat - Ajout des balises code]

Edité par ChMat

C'est vrai que c'est sympa le menu déroulant... Ca me donne envie d'essayer...