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 :

Problème menu déroulant


Sujet :

CSS

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre confirmé
    Homme Profil pro
    Webmaster
    Inscrit en
    Mai 2012
    Messages
    73
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Charente Maritime (Poitou Charente)

    Informations professionnelles :
    Activité : Webmaster
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Mai 2012
    Messages : 73
    Par défaut Problème menu déroulant
    Bonjour,

    Lorsque je pointe la souris sur le menu, un sous-menu apparait.
    Sous Firefox, Chrome, IE 9 et 8 tout fonctionne, mais sous IE 7 le sous-menu disparait si la souris descend dans le bas du sous-menu.

    Voici mon code, vous pouvez le tester pour mieux comprendre :

    Code html : 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
    <ul id="nav">
    				<li>
    					<a href="index.php" class="first-link"><span>Accueil</span></a>
    				</li>
    				<li>
    					<a href="index.php" class="first-link"><span>Communauté</span></a>
    					<ul>
    						<div class="first">
    							<div class="secondary">
    								<li>qdsfqdsf</li>
    								<li>qdsfqdsf</li>
    								<li>qdsfqdsf</li>
    								<li>qdsfqdsf</li>
    								<li>qdsfqdsf</li>
    								<li>qdsfqdsf</li>
    								<li>qdsfqdsf</li>
    								<li>qdsfqdsf</li>
    								<li>qdsfqdsf</li>
    								<div class="last"></div>
    							</div>
    						</div>
    					</ul>
    				</li>
    				<li>
    					<a href="index.php" class="first-link"><span>Mon compte</span></a>
     
    				</li>
    				<li>
    					<a href="index.php" class="first-link"><span>Articles</span></a>
    				</li>
    				<li>
    					<a href="index.php" class="first-link"><span>Support</span></a>
     
    				</li>
    			</ul>

    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
    78
    79
    #nav {
    	list-style-type: none;
    	height: 120px;
    	width: 800px;
    	margin: 0 225px;
    	z-index: 90;
    }
    #nav li {
    	float: left;
    	margin-left: 5px;
    	position: relative;
    }
    #nav li a.first-link {
    	background: url(http://www.web-astronomie.fr/images/menu/menu-left.png) no-repeat left top;
    	padding-left: 20px;
    	position: relative;
    	float: left;
    	z-index: 100;
    }
    #nav li a.first-link span {
    	background: url(http://www.web-astronomie.fr/images/menu/menu-right.png) no-repeat right top;
    	padding: 0px 20px 0px 0px;
    	cursor: pointer;
    	line-height: 45px;
    	height: 46px;
    	color: #fff;
    	float: left;
    }
    #nav li a.first-link:hover {
    	background: url(http://www.web-astronomie.fr/images/menu/menu-left-hover.png) no-repeat left top;
    }
    #nav li a.first-link:hover span {
    	background: url(http://www.web-astronomie.fr/images/menu/menu-right-hover.png) no-repeat right top;
    }
    #nav li ul {
    	list-style-type: none;
    	position: absolute;
    	padding: 60px 0 0;
    	margin: auto;
    	top: 0;
    	left: 0;
    	width: 182px;
    	float: left;
    	display: none;
    	z-index: 95;
    }
    #nav li:hover ul {
    	display: block;
    }
    #nav .first {
    	background-image: url(http://www.web-astronomie.fr/images/menu/drop-down-bg-top-1.png);
    	background-repeat: no-repeat;
    	height: 15px;
    	margin: 0px;
    	width: 182px;
    }
    #nav .secondary {
    	background: url(http://www.web-astronomie.fr/images/menu/drop-down-bg-top-2.png) repeat-y -0px 0px;
    	padding: 5px;
    	margin-top: 15px;
    	width: 182px;
    	float: left;
    }
    #nav .last {
    	background-image: url(http://www.web-astronomie.fr/images/menu/drop-down-bg-top-3.png);
    	background-repeat: no-repeat;
    	background-position: 0px 0px;
    	height: 7px;
    	width: 182px;
    	clear: both;
    }
    #nav ul li {
    	float: left;
    	display: block;
    }
    #nav li:hover ul li {
    	float: none;
    	display: block;
    }
    Merci d'avance pour vos réponses

  2. #2
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 55
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Billets dans le blog
    20
    Par défaut
    Tu mets des <div> dans des <ul> ?
    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

  3. #3
    Membre confirmé
    Homme Profil pro
    Webmaster
    Inscrit en
    Mai 2012
    Messages
    73
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Charente Maritime (Poitou Charente)

    Informations professionnelles :
    Activité : Webmaster
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Mai 2012
    Messages : 73
    Par défaut Résolu
    Problème résolu, c'était un problème de z-index, il manquait position:relative;
    Et sinon les div dans les ul, c'est les images du bloc ul, mais j'ai enlevé ça, j'ai mis une image a chaque ul avec différente hauteur, le code est plus valide comme ça

    Merci quand même

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

Discussions similaires

  1. Problème menu déroulant vertical
    Par barbapapa2 dans le forum Général JavaScript
    Réponses: 3
    Dernier message: 31/10/2006, 12h28
  2. Problème menu déroulant devant formulaire
    Par Kyvin dans le forum Mise en page CSS
    Réponses: 6
    Dernier message: 05/10/2006, 09h42
  3. Problème menu déroulant / div
    Par cell dans le forum Balisage (X)HTML et validation W3C
    Réponses: 2
    Dernier message: 28/07/2006, 15h34
  4. Problème menu déroulant vertical
    Par zoidy dans le forum Général JavaScript
    Réponses: 3
    Dernier message: 23/05/2006, 14h57

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