Probleme avec affichage de menu deroulant

Signaler
Messages postés
27
Date d'inscription
vendredi 26 décembre 2014
Statut
Membre
Dernière intervention
2 mai 2015
-
Messages postés
1784
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
28 avril 2021
-
Bonjour,
j'ai besoin de votre aide pour résoudre mon problème d'affichage de menu déroulant.Voila dans ma page j'ai un menu et juste au dessous de ce menu j'ai un espace ou je fais défiler des images et donc quand je clic sur un élément du menu il se déroule mais en arrière plan c'est a dire l'image déroulant cache les éléments du menu.
merci d'avance

3 réponses

Messages postés
32362
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
8 mai 2021
346
Bonjour
sans voir ton code. .. difficile de te répondre.

Par contre as tu regardé en css du côté de z-index ?
Messages postés
27
Date d'inscription
vendredi 26 décembre 2014
Statut
Membre
Dernière intervention
2 mai 2015

voici mon code

<!doctype html>


<head>
<meta charset="utf-8">
<title>Emploi et Recrutement avec FasoJob-Burkina Faso</title>
<meta name="description" content="description here">
<meta name="author" content="content here">

<link rel="stylesheet" href="css/5css.css">
<link rel="stylesheet" href="css/style1.css" /
<link rel="stylesheet" type="text/css" href="css/style_zoneformation.css" media="screen">
<script src="js/all.js" id="facebook-jssdk"></script><script src="js/jquery_002.js" type="text/javascript"></script>
<script src="js/jquery-ui.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery_003.js"></script>
<script type="text/javascript" src="js/hoverIntent.js"></script>
<script type="text/javascript" src="js/superfish.js"></script>
<script type="text/javascript" src="js/supersubs.js"></script>
<script type="text/javascript" src="js/supposition.js"></script>
<script type="text/javascript" src="js/customscripts.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
$('.slideshow').cycle({
fx: 'scrollHorz',
timeout: 5000,
speed: 1000,
easing: 'easeInOutBack', // options are: easeInOutQuad, easeInOutCubic, easeInOutQuart, easeInOutQuint, easeInOutSine, easeInOutExpo, easeInOutCirc, easeInOutElastic, easeInOutBack, easeInOutBounce
pause: 1,
pauseOnPagerHover: 1,
prev: '#slideprev',
next: '#slidenext',
after: onAfter,
sync: 1,
autostop: 0,
autostopCount: 0,
pager: '#slidenav'
});
});
function onAfter(curr, next, opts) {
var index = opts.currSlide;
$('#slideprev')[index == 0 ? 'hide' : 'show']();
$('#slidenext')[index == opts.slideCount - 1 ? 'hide' : 'show']();
};
</script>
</head>

<body>




<script type="text/java/script">
sfHover = function() {
var sfEls = document.getElementById("menu").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>

<div id="login-box">
<a href="javascript:void(0);" id="login-close"></a>
<form action="#" method="post">
<h3>ACCES AU COMPTE</h3>

<input type="text" onFocus="if(this.value=='Nom utilisateur')this.value='';" onBlur="if(this.value=='')this.value='Nom Utilisateur';" value="Nom utilisateur" name="username" class="input-1" />
<input type="password" onFocus="if(this.value=='Password')this.value='';" onBlur="if(this.value=='')this.value='Password';" value="Password" name="password" class="input-1" />
<div class="login-submit">
<input type="submit" id="login-btn" value="Connexion" /><a href="#">Mot de passe oublié?</a>
</div>
</form>
</div>

<!--start header -->
<div id="header-container">
<header class="wrapper">
<div id="logo">
<div id="title">
Le FasoJob</div>
</div>
<!--start navigation -->
<nav>
<ul id="menu">

<li>
<a href="index.php">Accueil</a>
</li>

<li>
<a href="#">Ofrres d'Emploi</a>

</li>
<li>
<a href="#">CVthèque</a>

</li>

<li>
<a href="#">Espace Candidats</a>
<ul>
<li><a href="inscriptioncandidat.php">Inscription</a></li>
<li><a href="creer_cv.php">Créer un CV</a></li>
<li><a href="#">Modifier un CV</a></li>
<li><a href="#">Visualiser un CV</a></li>
</ul>
</li>

<li>
<a href="#">Espace Rescruteurs</a>
<ul>
<li>
<div id="sup1"><a href="inscriptionrecruteur.php">Inscription</a> </div>
</li>
<li>
<div id="sup1"><a href="publie_offre.php">Publier Offre d'emploi</a> </div>
</li>
<li>
<div id="sup1"><a href="#">Liste d'offres publiées</a> </div>
</li>

</ul>
</li>
<li>
<div id="sup"><a href="javascript:void(0);" id="login">Connexion</a></div>
</li>

</ul>
</nav>
<!--end navigation -->
</header>
</div>
<!--end header -->

<!--start zone article formation -->

<div id="espaceform" class="wrapper">
<div class="container_12 slidebackground">
<div style="position: relative; overflow: hidden;" class="slideshow slide930">
<div style="position: absolute; top: 0px; left: -520px; display: none; z-index: 3; opacity: 1; width: 960px; height: 250px;" class="slideshowitem"> <img class="alignleft" src="images/tn_slide-image-1.png" alt="" height="250" width="960">
<div class="slidertopcontent">
<p> CASEM du département de la
Jeunesse, de la Formation Professionnelle et de l'Emploi
</p>
</div>
<div class="sliderbottomcontent">
<p><strong>Le 31 mars 2015, c'est tenu à
Ouagadougou, le premier Conseil d'Administration du Secteur
Ministériel (CASEM) du département de la
Jeunesse, de la Formation Professionnelle et de l'Emploi


</strong></p>
</div>
</div>
<div style="position: absolute; top: 0px; left: -520px; display: none; z-index: 3; opacity: 1; width: 960px; height: 250px;" class="slideshowitem"> <img class="alignleft" src="images/tn_slide-image-2.png" alt="" height="250" width="960">
<div class="slidertopcontent">
<p>750 jeunes reçoivent des kits et fonds de roulement</p>
</div>
<div class="sliderbottomcontent">
<p>Le lancement officiel
de la remise de kits et de fonds de roulement aux jeunes
bénéficiaires de la mesure sociale relative
à l'installation des jeunes formés aux
métiers a eu lieu le 16 janvier 2015 à Bobo
Dioulasso

</p>
</div>
</div>

<div style="position: absolute; top: 0px; left: 0px; display: block; z-index: 4; opacity: 1; width: 960px; height: 250px;" class="slideshowitem"> <img class="alignleft" src="images/tn_slide-image-3.png" alt="" height="250" width="960">
<div class="slidertopcontent">
<p>L'Ambassadeur
de Chine Taiwan reçu par Monsieur le Ministre de la JFP
</p>
</div>
<div class="sliderbottomcontent">
<p>Entre les deux hommes, les domaines de collaboration entre la
République de Chine Taiwan et le Burkina Faso. Cette
collaboration est excellence et Taiwan est un partenaire de choix du
Ministère de la Jeunesse, de la Formation Professionnelle et
de l'Emploi.
</p>
</div>
</div>
</div>
<div id="slidenav"><a class="" href="#">1</a><a class="" href="#">2</a><a class="activeSlide" href="#">3</a></div>
</div>
</div>

<!--end zone article formation -->


</body>
</html>




voici le css



body {
background-color: rgb(229,229,229);
/*background-image: url(images/stucco.png);*/
margin-top: 0px;
margin-bottom: 0px;
font-family: Helvetica, "Helvetica Neue", Arial, sans-serif;
}

.wrapper{
margin:auto;
width:960px;
}

#header-container{
background-color:#FF8C40;
/*height: 130px;*/
border-bottom:20px solid #e44d26;
margin-bottom:20px;
-webkit-box-shadow:0 40px 40px -40px #AAA;
-moz-box-shadow:0 40px 40px -40px #AAA;
box-shadow:0 40px 40px -40px #AAA;
height: 120px;
background-image: url(../images/header-bg.png);
background-repeat: repeat-x;
background-position: center;
box-shadow: 0 45px 60px -50px #000000;
/*margin-bottom: auto;*/
margin-top: -25px;;
/*border-top:20px solid black;*/
}



#title{
font-weight:900;
width: 80px;
height: 35px;
float: left;
font-size: xx-large;
color: #FFFFFF;
font-variant: small-caps;
text-transform: uppercase;
padding-top: 58px;
margin-left: 92px;
text-shadow: 2px 2px 2px #FF8C40;
filter: dropshadow(color=#FF8C40, offx=2, offy=2);
}

#logo{
color:white;
float:left;
background-image: url(../images/blogger.png);
background-repeat: no-repeat;
height: 123px;
width: 123px;
-webkit-box-shadow:0 45px 60px -60px #AAA;
-moz-box-shadow:0 45px 60px -60px #AAA;
box-shadow:0 45px 60px -60px #AAA;

}


header nav{
float:right;
margin: auto;
}


#menu, #menu ul /* Liste */
{
padding : 0; /* pas de marge intérieure */
margin : 0; /* ni extérieure */
list-style : none; /* on supprime le style par défaut de la liste */
line-height : 21px; /* on définit une hauteur pour chaque élément */
text-align : center; /* on centre le texte qui se trouve dans la liste */
}

#menu /* Ensemble du menu */
{
font-weight : bold; /* on met le texte en gras */
font-family : Arial; /* on utilise Arial, c'est plus beau ^^ */
font-size : 12px; /* hauteur du texte : 12 pixels */
}

#menu a /* Contenu des listes */
{
display : block;
padding : 0; /* aucune marge intérieure */
background: #872907;
background: -webkit-gradient(linear, left top, left bottom, from(#f24a0c), to(#872907));
background: -webkit-linear-gradient(top, #f24a0c, #872907);
background: -moz-linear-gradient(top, #f24a0c, #872907);
background: -ms-linear-gradient(top, #f24a0c, #872907);
background: -o-linear-gradient(top, #f24a0c, #872907);
-webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
-moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
box-shadow: rgba(0,0,0,1) 0 1px 0;
text-shadow: rgba(0,0,0,.4) 0 1px 0;
color: white;
text-align : center;
font-size: 14px;
font-family: Georgia, serif;
text-decoration : none; /* on supprime le style par défaut des liens (la plupart du temps = souligné) */
width : 150px; /* largeur */
height: 35px;
}

#menu li ul /* Sous-listes */
{
position: absolute;
width: 150px; /* Largeur des sous-listes */
left: -999em; /* Hop, on envoie loin du champ de vision */
}

#menu li ul li /* Eléments de sous-listes */
{
/* pour ie qui ne reconnaît pas "transparent" (comme précédemment) */
border-top : 1px solid #fff; /* on met une bordure blanche en haut de chaque élément d'une sous-liste */
}



/* IE ne reconnaissant pas le sélecteur ">" */
html>body #menu li ul li
{
border-top : 1px solid transparent; /* on met une bordure transparente en haut de chaque élément */
}

#menu a:hover /* Lorsque la souris passe sur un des liens */
{
border-top-color: #f24a0c;
background: -webkit-gradient(linear, left top, left bottom, from(#f24a0c), to(#872907));
background: -webkit-linear-gradient(top, #f24a0c, #872907);
background: -moz-linear-gradient(top, #f24a0c, #872907);
background: -ms-linear-gradient(top, #f24a0c, #872907);
background: -o-linear-gradient(top, #f24a0c, #872907);
color: #ccc;
background: #872907;
-moz-box-shadow:0px 0px 4px #000000;
-webkit-box-shadow:0px 0px 4px #000000;
box-shadow:0px 0px 4px #000000;
line-height: normal;
/*float: right;
height: 25px;
width: 75px;*/
text-align: center;
-moz-border-radius-topleft: 8px;
-moz-border-radius-topright: 8px;
}



#menu li:hover ul ul, #menu li.sfhover ul ul /* Sous-sous-listes lorsque la souris passe sur un élément de liste */
{
left: -999em; /* On expédie les sous-sous-listes hors du champ de vision */
}

#menu li:hover ul, #menu li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul /* Sous-listes lorsque la souris passe sur un élément de liste ET sous-sous-lites lorsque la souris passe sur un élément de sous-liste */
{
left: auto; /* Repositionnement normal */
min-height: 0; /* Corrige un bug sous IE */
}

#menu a:active{
border-top-color: #f24a0c;
background: #f24a0c;
line-height: normal;
text-align: center;
-moz-border-radius-topleft: 8px;
-moz-border-radius-topright: 8px;
}



#menu li /* Éléments des listes */
{
float : left;
/* pour IE qui ne reconnaît pas "transparent" */
border-right : 1px solid #fff; /* on met une bordure blanche à droite de chaque élément */
}

/* IE ne reconnaissant pas le sélecteur ">" */
html>body #menu li
{
border-right: 1px solid transparent ; /* on met une bordure transparente à droite de chaque élément */
}




#espaceform{
background: white;
margin-top:0px;
padding-bottom : 0px;
padding-left :0px;
padding-right :0px;
/*height: 200px;*/
border-left: 2px outset gray;
border-right:2px outset gray;
border-bottom: 10px outset gray;
clear:both;
/*background-image: url(img/slider-background2.png);*/
background-repeat: repeat-x;
background-position: center top;
height: 250px;
/*overflow: hidden;*/

}

Messages postés
1784
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
28 avril 2021
126
bonjour

sa en fait du code

modifie le z-index du menu sa devrait suffire