Menu déroulant à 4 sous-niveaux

Résolu/Fermé
irongege Messages postés 40847 Date d'inscription jeudi 1 novembre 2007 Statut Modérateur Dernière intervention 29 juin 2023 - 1 mai 2012 à 19:38
empty Messages postés 837 Date d'inscription vendredi 25 juillet 2008 Statut Membre Dernière intervention 23 février 2016 - 8 mai 2012 à 11:20
Bonjour,

Je bloque pour réaliser le dernier niveau d'un menu déroulant.

Voici le code qui marche par mes 3 premiers niveaux :

Html :

<ul id="menu">

        <li>
                <a href="testindex.php">Dyno Team</a>
				<ul>
						<li><a href="dynojet.php">Banc Dynojet</a></li>
				</ul>		
        </li>
        
        <li>
                <a href="#">Dyno potes</a>
                <ul>
                        <li><a href="partenaires.php">Sites</a></li>
                        <li><a href="#">Forums</a></li>
                </ul>
        </li>
        
        <li>
                <a href="#">Dyno Vue</a>
                <ul>
                        <li>
                                <a href="#">Photos</a>

                                <ul>
                                        <li><a href="#">2011</a></li>

                                        <li><a href="#">2012</a></li>
                                </ul>
                        </li>
                        <li>
                                <a href="#">Vidéos</a>

                                <ul>
                                        <li><a href="#">2011</a></li>
                                               sous niveau à rajouter ICI dépendant de 2011
                                        <li><a href="#">2012</a></li>
                                </ul>
                        </li>						
                </ul>
        </li>
        <li>
                <a href="#">Dyno Dépot</a>
                <ul>
                        <li><a href="#">Dépot de lien</a></li>
                        <li><a href="#">Vos avis</a></li>
                </ul>
        </li>
        
        <li>
                <a href="#">Dyno Signe</a>
				<ul>
						<li><a href="contact.php">Contact</a></li>
				</ul>
		</li>
        <li>
                <a href="#">Dyn' Or</a>
				<ul>
						<li><a href="livre_d_or.php">Livre d'or</a></li>
				</ul>
		</li>		
        
</ul>


Le CSS :

/* CSS Document */
#menu, #menu ul /* Liste */     
{
        padding : 0; /* pas de marge intérieure */
        margin : 0; /* ni extérieure */
        list-style : none; /* on supprime le style par défaut de la liste */
        line-height : 28px; /* on définit une hauteur pour chaque élément */
        text-align : center; /* on centre le texte qui se trouve dans la liste */
}

#menu /* Ensemble du menu */
{
        font-weight : bold; /* on met le texte en gras */
        font-family : Arial; /* on utilise Arial, c'est plus beau ^^ */
        font-size : 13px; /* hauteur du texte : 12 pixels */
}
#menu, #menu ul /* Liste */     
{
        padding : 0; /* pas de marge intérieure */
        margin : 0; /* ni extérieure */
        list-style : none; /* on supprime le style par défaut de la liste */
        line-height : 28px; /* on définit une hauteur pour chaque élément */
        text-align : center; /* on centre le texte qui se trouve dans la liste */
}

#menu /* Ensemble du menu */
{
        font-weight : bold; /* on met le texte en gras */
        font-family : Arial; /* on utilise Arial, c'est plus beau ^^ */
        font-size : 13px; /* hauteur du texte : 12 pixels */
}

#menu a /* Contenu des listes */
{
	display : block; /* on change le type d'élément, les liens deviennent des balises de type block */
	padding : ; /* couleur de fond */
	color : #FFFF00; /* couleur du texte */
	text-decoration : none; /* on supprime le style par défaut des liens (la plupart du temps = souligné) */
	width : 144px; /* largeur */
	background-image: url(p_menubutton1.png);
}

#menu li /* Elements des listes */      
{ 
        float : left; 
        /* pour IE qui ne reconnaît pas "transparent" */
        
}

/* IE ne reconnaissant pas le sélecteur ">" */
html>body #menu li
{
        
}

#menu li ul /* Sous-listes */
{ 
        position: absolute; /* Position absolue */
        width: 144px; /* Largeur des sous-listes */
        left: -999em; /* Hop, on envoie loin du champ de vision */
}


#menu li ul li /* Éléments de sous-listes */
{
        /* pour IE qui ne reconnaît pas "transparent" (comme précédemment) */
        
}

/* IE ne reconnaissant pas le sélecteur ">" */
html>body #menu li ul li                
{
        
}

#menu li ul ul 
{
        margin    : -22px 0 0 144px ; /* On décale les sous-sous-listes pour qu'elles ne soient pas au dessus des sous-listes */ 
        /* pour IE qui ne reconnaît pas "transparent" (comme précédemment) */
             
}

/* IE ne reconnaissant pas le sélecteur ">" ... je me répète ;-) */
html>body #menu li ul ul                
{
        
}
#menu a:hover /* Lorsque la souris passe sur un des liens */    
{
	color: #FFFFFF; /* ... et au contraire, le fond en blanc */
	background-image: url(a_menubutton1.png);
}
#menu li:hover ul ul, #menu li.sfhover ul ul /* Sous-sous-listes lorsque la souris passe sur un élément de liste */
{
        left: -999em; /* On expédie les sous-sous-listes hors du champ de vision */
}

#menu li:hover ul, #menu li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul  /* Sous-listes lorsque la souris passe sur un élément de liste ET sous-sous-lites lorsque la souris passe sur un élément de sous-liste */
{
        left: auto; /* Repositionnement normal */
        min-height: 0; /* Corrige un bug sous IE */
}



Que faut-il que je rajoute dans mon html et dans mon css pour avoir un 4éme niveau que j'ai mis en gras dans le html.

Par avance, merci à ceux qui prendront du temps.


A voir également:

1 réponse

empty Messages postés 837 Date d'inscription vendredi 25 juillet 2008 Statut Membre Dernière intervention 23 février 2016 176
2 mai 2012 à 10:20
As-tu déjà + cherché dans ce côté là ? https://forums.commentcamarche.net/forum/affich-1527743-html-php-liste-deroulante-a-plusieurs-niveau

Parce que tu parles de liste déroulante et dans ton code les tags sont destinés à une liste à puce et non déroulante...
0
maka54 Messages postés 698 Date d'inscription mercredi 8 avril 2009 Statut Membre Dernière intervention 4 décembre 2016 80
2 mai 2012 à 10:51
c'est un menu qu'il cherche à faire, pas un formulaire ...

Pourquoi jouer sur les mots ???
0
bg62 Messages postés 23654 Date d'inscription samedi 22 octobre 2005 Statut Modérateur Dernière intervention 8 novembre 2024 2 385
2 mai 2012 à 11:14
justement, on arrive sur une page qui nous mène à :
https://dosimple.ch/articles/Menus-dynamiques/menuHorizontal.html
@irongege : si ça te vas ... dis-le, sinon il y a bien d'autres exemples, car celui-ci a un ... peu beaucoup de 'JavaScript' mais on doit pouvoir s'en passer, faut essayer ;)
@+
0
empty Messages postés 837 Date d'inscription vendredi 25 juillet 2008 Statut Membre Dernière intervention 23 février 2016 176
2 mai 2012 à 11:16
La liste déroulante formulaire permet aussi d'être utilisé comme menu, bien que ça ne soit pas son utilité principale, et il n'y a pas à jouer sur les mots, si je te dis je vais mettre du DIESEL dans ta tondeuse, alors que c'est une essence, tu vas me rectifier pour être sur que je ne fasse pas d'erreur ;)
0
maka54 Messages postés 698 Date d'inscription mercredi 8 avril 2009 Statut Membre Dernière intervention 4 décembre 2016 80
2 mai 2012 à 11:39
La liste déroulante formulaire permet aussi d'être utilisé comme menu

tu aurais un exemple ?? un site qui fait çà ?? çà m'intéresserait beaucoup de voir à quoi çà ressemble
0
empty Messages postés 837 Date d'inscription vendredi 25 juillet 2008 Statut Membre Dernière intervention 23 février 2016 176
2 mai 2012 à 11:47
Dans ce site tu pointes en header ton pseudo là où il y a la petite enveloppe et tu peux changer le thème (Skin) et la taille d'écriture (Font) :) tu en veux d'autres ? Maintenant évidemment ce n'est pas spécialement une bonne technique, perso je ne le fais pas, où alors exceptionnellement pour certains clients qui le voudrait, mais bon ça fonctionne aussi ;)
0