Créer un menu avec des Sous Menu

Fermé
yassinee Messages postés 233 Date d'inscription dimanche 15 mai 2005 Statut Membre Dernière intervention 26 novembre 2011 - 18 juil. 2009 à 21:49
yassinee Messages postés 233 Date d'inscription dimanche 15 mai 2005 Statut Membre Dernière intervention 26 novembre 2011 - 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"><span class=pn2> Menu1</span></a></li>
<ul class="sousmenu">
<li><a href="index.php?p=SouMenu1"><span class=pn2>SouMenu1 </span></a></li>
<li><a href="index.php?p=SouMenu2"><span class=pn2>SouMenu2 </span></a></li>
<li><a href="index.php?p=SouMenu3"><span class=pn2>SouMenu3 </span></a></li>
<li><a href="index.php?p=SouMenu4"><span class=pn2>SouMenu4</span></a></li>
</ul>
<li><a href="index.php?p=questions"><span class=pn2>Contact</span></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
A voir également:

4 réponses

imw Messages postés 233 Date d'inscription vendredi 17 juillet 2009 Statut Membre Dernière intervention 8 septembre 2011 42
19 juil. 2009 à 09:37
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
yassinee Messages postés 233 Date d'inscription dimanche 15 mai 2005 Statut Membre Dernière intervention 26 novembre 2011 27
19 juil. 2009 à 17:10
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
Rodolphe_ Messages postés 1481 Date d'inscription samedi 7 mai 2005 Statut Membre Dernière intervention 20 décembre 2014 288 > yassinee Messages postés 233 Date d'inscription dimanche 15 mai 2005 Statut Membre Dernière intervention 26 novembre 2011
19 juil. 2009 à 17:37
avec la propriété margin-left
0
yassinee Messages postés 233 Date d'inscription dimanche 15 mai 2005 Statut Membre Dernière intervention 26 novembre 2011 27 > Rodolphe_ Messages postés 1481 Date d'inscription samedi 7 mai 2005 Statut Membre Dernière intervention 20 décembre 2014
19 juil. 2009 à 17:54
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
Rodolphe_ Messages postés 1481 Date d'inscription samedi 7 mai 2005 Statut Membre Dernière intervention 20 décembre 2014 288 > yassinee Messages postés 233 Date d'inscription dimanche 15 mai 2005 Statut Membre Dernière intervention 26 novembre 2011
19 juil. 2009 à 19:27
#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
yassinee Messages postés 233 Date d'inscription dimanche 15 mai 2005 Statut Membre Dernière intervention 26 novembre 2011 27 > Rodolphe_ Messages postés 1481 Date d'inscription samedi 7 mai 2005 Statut Membre Dernière intervention 20 décembre 2014
19 juil. 2009 à 22:37
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
Rodolphe_ Messages postés 1481 Date d'inscription samedi 7 mai 2005 Statut Membre Dernière intervention 20 décembre 2014 288
19 juil. 2009 à 10:40
Tu es sur de ça? j'ai pus afficher un menu déroulant avec IE.
https://marcarea.com/tuto/menu-deroulant-css/
0
imw Messages postés 233 Date d'inscription vendredi 17 juillet 2009 Statut Membre Dernière intervention 8 septembre 2011 42
19 juil. 2009 à 14:33
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
Arpheus Messages postés 40 Date d'inscription jeudi 4 décembre 2008 Statut Membre Dernière intervention 29 mars 2010 9
20 juil. 2009 à 10:36
C'est pour cette raison que chaque <li> contient un <a>.
0
yassinee Messages postés 233 Date d'inscription dimanche 15 mai 2005 Statut Membre Dernière intervention 26 novembre 2011 27
23 juil. 2009 à 21:28
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