IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mise en page CSS Discussion :

menu déroulant au premier plan


Sujet :

CSS

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre à l'essai
    Profil pro
    Inscrit en
    Janvier 2012
    Messages
    5
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Janvier 2012
    Messages : 5
    Par défaut menu déroulant au premier plan
    bonjour je n'arrive pas à mettre mon menu déroulant au premier plan sous firefox (pas de probleme sur Ie8).
    Mon menu déroulant se situe en haut de page et avec le hover mes menus déroulant s'ouvre mais reste derriere le corps principal de la page donc quand la souris passe sur du texte de la page mon menu disparait. je ne sais pas quel fonction en CSS je pourrai mettre pour obliger l'affichage de mon menu au premier plan.

    Merci pour vos réponses en avance.

    Exemples de code utilisés:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    #menu
    {
    	background-color: #160f79;
        opacity: 0.8; 
    	width: 1280px;
    	height: 30px;
    	list-style-type: none;
    	margin: 0;
    	margin-top: 130px;
    	padding: 0;
    	border: 0;
    	position:fixed;
    	top: 0;
    	left: 0;
    }
    #menu li
    {
    	float: left;
    	width: 160px;
    	margin: 0;
    	padding: 0;
    	border: 0;
    }
    #menu li a:link, #menu li a:visited
    {
    	display: block;
    	height: 1%;
    	color: #1db2ea;
    	background: #160f79;
    	margin: 0;
    	padding: 4px 8px;
    	border-right: 1px solid #fff;
    	text-decoration: none;
    }
    #menu li a:active { background-color: #160f79; }
    #menu li a:hover
    {
    	background-image: none;
    	background-color: #8a0c24;
    	color: #f5f02b;
    }
    #menu .sousMenu
    {
    	display: none;
    	list-style-type: none;
    	margin: 0;
    	padding: 0;
    	border: 0;
    }
    #menu .sousMenu li
    {
    	float: none;
    	margin: 0;
    	padding: 0;
    	border: 0;
    	width: 160px;
     
    }
    #menu .sousMenu li a:link, #menu .sousMenu li a:visited
    {
    	display: block;
    	color: #1db2ea;
    	margin: 0;
    	border: 0;
    	text-decoration: none;
    	background-color: #160f79;
     
    }
    #menu .sousMenu li a:hover
    {
    	background-image: none;
    	background-color: #8a0c24;
    	color: #f5f02b;
     
    }
     
    #menu li:hover > .sousMenu { display: block; }

  2. #2
    Rédacteur

    Avatar de Torgar
    Homme Profil pro
    Développeur Web
    Inscrit en
    Août 2007
    Messages
    2 334
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 39
    Localisation : France, Hérault (Languedoc Roussillon)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Août 2007
    Messages : 2 334
    Par défaut
    Bonsoir,

    Il faut faire un positionnement CSS et jouer avec la profondeur via la propriété z-index.

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    #menu
    {
        background-color: #160f79;
        opacity: 0.8; 
        width: 1280px;
        height: 30px;
        list-style-type: none;
        margin: 0;
        margin-top: 130px;
        padding: 0;
        border: 0;
        position:fixed;
        top: 0;
        left: 0;
    position: relative; /* ou absolute ça dépend de ton design */
    z-index: 10; /* A adapter au besoin */
    }
    Je ne suis pas schizophrène, nous sommes unanime !!!

    ► Pensez à la balise code et au CODE HTML GENERE !!!!
    ► Au si c'est le cas et au à ceux qui vous ont aidé.
    Vous souhaitez participer aux rubriques CSS et (X)HTML ? Contactez-nous !

    Créer des colonnes de même hauteur en CSS
    Glossaire CSS
    Les bordures en CSS3
    Les transitions en CSS3

  3. #3
    Membre à l'essai
    Profil pro
    Inscrit en
    Janvier 2012
    Messages
    5
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Janvier 2012
    Messages : 5
    Par défaut
    Citation Envoyé par Torgar Voir le message
    Bonsoir,

    Il faut faire un positionnement CSS et jouer avec la profondeur via la propriété z-index.
    Merci Beaucoup Torgar mon problème est résolu je ne connaissais pas la fonction z-index. Je vais me pencher sur cette fonction.

    Bonne soirée

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Réponses: 8
    Dernier message: 19/08/2013, 17h06
  2. Affichage menu en premier plan
    Par imenfatma dans le forum Mise en page CSS
    Réponses: 5
    Dernier message: 08/12/2012, 16h17
  3. Label en premier plan sur mon asp:Menu
    Par Jayjay84 dans le forum ASP.NET
    Réponses: 1
    Dernier message: 05/04/2011, 16h25
  4. [AJAX] DIV menu au premier plan : bug
    Par poitierjohan dans le forum AJAX
    Réponses: 2
    Dernier message: 22/06/2010, 10h43
  5. Menu déroulant CSS centré au premier plan
    Par CaptainCam dans le forum Mise en page CSS
    Réponses: 1
    Dernier message: 11/11/2009, 11h33

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo