Probleme avec affichage de menu deroulant
MJ@
Messages postés
27
Date d'inscription
vendredi 26 décembre 2014
Statut
Membre
Dernière intervention
2 mai 2015
-
17 avril 2015 à 23:47
@karamel Messages postés 1855 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 18 avril 2024 - 20 avril 2015 à 12:52
@karamel Messages postés 1855 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 18 avril 2024 - 20 avril 2015 à 12:52
A voir également:
- Javascript menu déroulant dynamique
- Récupérer données json (javascript) - Conseils pratiques -Javascript
- Javascript poo - Conseils pratiques -Javascript
- Base de données javascript - Conseils pratiques -Javascript
- Javascript goto ✓ - Forum Javascript / DHTML
- Menu php - Forum PHP
3 réponses
jordane45
Messages postés
38138
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
17 avril 2024
344
17 avril 2015 à 23:50
17 avril 2015 à 23:50
Bonjour
sans voir ton code. .. difficile de te répondre.
Par contre as tu regardé en css du côté de z-index ?
sans voir ton code. .. difficile de te répondre.
Par contre as tu regardé en css du côté de z-index ?
MJ@
Messages postés
27
Date d'inscription
vendredi 26 décembre 2014
Statut
Membre
Dernière intervention
2 mai 2015
19 avril 2015 à 22:56
19 avril 2015 à 22:56
voici mon code
voici le css
<!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;*/
}
@karamel
Messages postés
1855
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
18 avril 2024
153
20 avril 2015 à 12:52
20 avril 2015 à 12:52
bonjour
sa en fait du code
modifie le z-index du menu sa devrait suffire
sa en fait du code
modifie le z-index du menu sa devrait suffire
