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

Configuration: Windows XP
Firefox 3.0.6

Afficher la suite

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 ...
0
1. 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???
 
 0
2. Rodolphe_ Messages postés 1572 Statut Membre 290 > yassinee Messages postés 235 Date d'inscription Statut Membre Dernière intervention
 
 avec la propriété margin-left
 
 0
3. 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 ???
 
 0
4. Rodolphe_ Messages postés 1572 Statut Membre 290 > 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;
 
 }
 
 0
5. 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
 
 0
Réponse 2 / 4
Rodolphe_ Messages postés 1572 Statut Membre 290

Tu es sur de ça? j'ai pus afficher un menu déroulant avec IE.
https://marcarea.com/tuto/menu-deroulant-css/
0
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)
0
1. Arpheus Messages postés 41 Statut Membre 9
 
 C'est pour cette raison que chaque <li> contient un <a>.
 
 0
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
0

Créer un menu avec des Sous Menu

4 réponses

Discussions similaires

Newsletters