Créer un menu avec des Sous Menu

yassinee Messages postés 235 Date d'inscription Statut Membre Dernière intervention -
yassinee Messages postés 235 Date d'inscription Statut Membre Dernière intervention - 23 juil. 2009 à 21:28

Bonjour,
Salut, je ne suis pas un pro en CSS ni en DHTML donc mon souci est que j'ai cette structure :
page Header.html
Code :

<div id="container">
<div id="navigation">
<ul id="navlist">
<li><a href="index.php">Accueil</a></li>
<li><a href="index.php?p=Menu1"> Menu1</a></li>
<ul class="sousmenu">
<li><a href="index.php?p=SouMenu1">SouMenu1 </a></li>
<li><a href="index.php?p=SouMenu2">SouMenu2 </a></li>
<li><a href="index.php?p=SouMenu3">SouMenu3 </a></li>
<li><a href="index.php?p=SouMenu4">SouMenu4</a></li>
</ul>
<li><a href="index.php?p=questions">Contact</a></li>

page Style.css
Code :

#container {
width: 750px;
margin: 0 auto;
font-family: Lucida Grande, Tahoma, Arial, Helvetica, sans-serif; /* Lucida Grande for the Macs, Tahoma for the PCs */
font-size: 11px;
line-height: 1.6em;
color: #666;
background-color: #FFF;
}
#navigation ul {
margin-left: 0;
padding-left: 0;
list-style-type: none;
float: right;/*left;*/
width: 140px;
}

#navigation a {
display: block;
padding: 5px;
width: 110px;
border-bottom: 1px solid #CCC;
}

#navigation a:link, #navlist a:visited {
color:#CC6714;
text-decoration: none;
}

#navigation a:hover {
background: #000000 url(../images/arrow.gif) 96% 50% no-repeat;
background-color: #F5F5F5;
color:#CC6714;
}

Je souhaite afficher SousMenu1,...4 une fois que le curseur est positionné sur Menu1 et aussi si c'est possible avec prise en compte des navigateurs suivant:IE6,IE7,Mozila3

Afficher la suite

A voir également:

Créer un menu avec des Sous Menu
Menu déroulant excel - Guide
Créer un lien pour partager des photos - Guide
Comment créer un groupe whatsapp - Guide
Créer un compte google - Guide
Créer un compte gmail - Guide

4 réponses

Réponse 1 / 4

imw Messages postés 233 Statut Membre 42

déjà, y'a un soucis de code html ..;

pour rester correct et coéhérent :

<ul id='navlist'>
    <li>menu1</li>
    <li>menu2
        <ul class='sousmenu'>
            <li>sousmenu1</li>
            <li>sousmenu2</li>
            <li>sousmenu3</li>
            <li>sousmenu4</li>
        </ul>
    </li>
    <li>menu3</li>
</ul>

Pour ce qui est de l'affichage c'est faisable en full CSS, saus pour IE qui ne sait pas faire de hover sur le li ...

en gros, l'idée est de déplacer le ul du sous menu pour qu'il s'affiche en dehors de l'écran.
Ensuite, lorsque tu passe sur le li (hover), le sous menu est remis à sa place normale ...

ul.sousmenu{
    position: absolute;
    left: -999em;
}
#navlist li:hover ul.sousmenu{
    left: auto;
}

Pour le rendre compatible IE, faut rajouter un bout de javascript ...

yassinee Messages postés 235 Date d'inscription Statut Membre Dernière intervention 27

Salut, Le petit souci qui reste est que les SousMenu apparaissent au de sus du Menu 3 comment déplacer les sous Menu a droite de tel sorte qu'une fois que le curseur se place sur Menu2 ces Sous menu apparaissent un peu a droite histoire de ne pas cacher les autres menu qui sont en bas j'espère que j'ai bien expliquez???

Rodolphe_ Messages postés 1572 Statut Membre 285 > yassinee Messages postés 235 Date d'inscription Statut Membre Dernière intervention

avec la propriété margin-left

yassinee Messages postés 235 Date d'inscription Statut Membre Dernière intervention 27 > Rodolphe_ Messages postés 1572 Statut Membre

salut a ce niveau j'ai mis:

#navlist li:hover ul.sousmenu{
left: auto;
margin-left=50px;

}

Le souci est que même si je change 50px par par exemple 100px rien ne change es que je l'est mis en mauvaise balise ???

Rodolphe_ Messages postés 1572 Statut Membre 285 > yassinee Messages postés 235 Date d'inscription Statut Membre Dernière intervention

#navlist li:hover > ul.sousmenu{
left: auto;
margin-left=50px;

ou essaye ça:
#menu_deroulant li:hover > .sous_menu {
display: block;
position: absolute;
left: 80%;
top: 30px;

}

yassinee Messages postés 235 Date d'inscription Statut Membre Dernière intervention 27 > Rodolphe_ Messages postés 1572 Statut Membre

Le souci est au niveau de firefox j'ai utilisé ca:
#navlist li:hover ul.sousmenu{
left: auto;

display: block;
position: absolute;
left: 60%;
top: 200px;
background: #FFFFFF;
width: 100px;

}
ul.sousmenu{
position: absolute;
left: -999em;
}
Le souci est au niveau de firefox les sous menu apparaissent mais il a un blanc qui apparait entre le menu ces sosu menu par contre sous IE c'est bon

Réponse 2 / 4

Rodolphe_ Messages postés 1572 Statut Membre 285

Tu es sur de ça? j'ai pus afficher un menu déroulant avec IE.
https://marcarea.com/tuto/menu-deroulant-css/

Réponse 3 / 4

imw Messages postés 233 Statut Membre 42

Il existe pleins de solutions pour faire ce genre de menus ...
Eux ont choisis de faire display block/none à la place du left -999em/auto mais le principe reste le même.

Ils utilisent
#menuDeroulant li:hover > .sousMenu { display: block; }

Ceci fonctionne en effet (j'ai testé) sur IE 7 et + !
Par contre, tu peux oublier sur IE6 et inférieur, du au fait qu'ils ne gère pas le hover sur les LI (seulement sur les A)

Arpheus Messages postés 41 Statut Membre 9

C'est pour cette raison que chaque <li> contient un <a>.

Réponse 4 / 4

yassinee Messages postés 235 Date d'inscription Statut Membre Dernière intervention 27

salut le souci est au niveau de width: 100px;

#navlist li:hover ul.sousmenu{
left: auto;

/* new AJout******/
display: block;
position: absolute;
left: 60%;
top: 200px;
background: #FFFFFF;
width: 100px;

Au niveau de IE c'est bon le sous menu apparait bien par contre sous firefox le sous menu est décaler

Discussions similaires

menu caché

Mon PC marque press the esc key for startup menu

Créer un menu avec des Sous Menu

4 réponses

Votre réponse

Discussions similaires

Newsletters