Version complète: sur le forum Webmaster Hub : Probleme de menu qui se déroule sous du texte
Webmaster Hub > Création et exploitation de Sites Internet > Les langages du Net > (X)HTML et CSS
rikiki
bonjour,

J'ai trouvé le code d'un menu déroulant en CSS/HTML
J'ai posé le menu dans ma page est le problème est:
au déroulement du menu celui ci passe "sous" un élément de la page web.


Je ne peux toucher qu'à peu de chose dans la page. (voir ici) Je peux toucher le menu et le header mais: pas de php, pas d'accés "au corps" de la page, etc.

Pourriez vous m'éclaircir quant au fonctionnent de "dessus dessous" pour le contenu de ma page?

par avance, merci.
Dadou
Dans ton fichier style.css

modifie ul#navmenu ul en lui rajoutant la ligne z-index: 100;, tu dois donc obtenir :

CODE
ul#navmenu ul {
    margin: 0;
    border: 0 none;
    padding: 0;
    width: 160px;
    list-style: none;
    display: none;
    position: absolute;
    top: 24px; /* déroulant vers le haut */
    left: 0;
    z-index: 100;
}
rikiki
merci beaucoup, ça fonctionne bien.

je ne connaissais pas l'utilité de z-index.
ça me permet d'en apprendre davantage.*

EDIT:

Ne fonctionne pas sous internet explorer
c'est un coup de microsoft?
lowkey
Salut rikiki !

J'ai eu le même problème, et ça vient bien de IE...

It appears that if you have multiple position:relative elements in your code, then IE sets up separate Z layer contexts for each one, which ignore each other.

Source : http://verens.com/archives/2005/07/15/ie-z-index-bug/

Personnellement, je ne travaille qu'avec des "position", il va donc falloir ruser...

Bonne chance !
rikiki
j'ai essayé avec des z-index: -XX; ajouté des position: relative et absolute.... IMSTP6.gif
à mon niveau je ne peux en faire plus.
Dadou
met un z-index: 50; a switch-module-latestproduct
rikiki
Résolu:

En faite c'est à
ul#navmenu li { /* qu'il fallait ajouter */ z-index: 100;} ; et pas à ul#navmenu ul

youpi, merci à vous
Ceci est une version "bas débit" de notre forum. Pour voir la version complète avec plus d'information, la mise en page et les images, veuillez cliquer ici.