Pb de menu déroulant help !!

Question

alex06220

27 Aug 2008 à 14:13

Bonjour a tous, j ai un probleme avec mon menu deroulant que j'ai réalisée en css

je voudrais 4 grands titres: accueil gestion des clients gestion des ressources humaines contacts
et en sous menus pour gestion des clients (liste des clients ajouter modifier et supprimer un client)
et pour gestion des ressources humaines (gestion des cameramans, photographes etc)

PROBLEME : Lors du survol de gestion des clients --->> gestion des ressources humaines et contact se ballade sur la page

meme chose pour le survol de gestion des ressources humaines --->> contact se ballade a l 'écran que faire.

J'ai mis le mini site en ligne sans lien pr l'instant http://alexandre.aillot.free.fr/menu/

XHTML :



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
   <head>
       <title>Love Story - Accueil</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<link rel="stylesheet" media="screen" type="text/css" title="Love Story" href="css/style.css" />
<!--[if IE]>
<link href="css/style_ie.css" rel="stylesheet" type="text/css" />
<![endif]-->
<link type="text/css" rel="stylesheet" href="dhtmlgoodies_calendar/dhtmlgoodies_calendar.css?random=20051112" media="screen" />
<script type="text/javascript" SRC="js/javascript.js"></script>
<script type="text/javascript" SRC="js/verification.js"></script>

</head>
<body>
<div id="conteneur">
<div id="bandeau"><img class="bandeau" src="images/bandeau.jpg" alt="bandeau" /></div>
<div id="menu">

<div class="align">
	<ul>
 <li><a class="ch" href="index.php">Accueil</a></li>
 
 <li class="a"><a class="ch" href="#">Gestion des clients</a>
  <ul class="j">

  <li class="z"><a href="client/liste_client.php">Liste des clients</a></li>
  <li class="z"><a href="client/ajout_client1.php">Ajouter un client</a></li>
  <li class="z"><a href="client/modif_client.php">Modifier un client</a></li>
   <li class="z"><a href="client/suppr_client.php">Supprimer un client</a></li>
  </ul>
 </li>
 <li class="b"><a class="ch" href="#">Gestion des ressources humaines</a>

  <ul class="deu">
   <li><a href="ressources_humaines/liste_cameraman.php">Gestion des cam&eacute;ramans</a></li>
   <li><a href="ressources_humaines/liste_photographe.php">Gestion des photographes</a></li>
   <li><a href="ressources_humaines/liste_forfait_video.php">Gestion des forfaits vid&eacute;os</a></li>
   <li><a href="ressources_humaines/liste_option_video.php">Gestion des options vid&eacute;os</a></li>

   <li><a href="ressources_humaines/liste_forfait_photographie.php">Gestion des forfaits photos</a></li>
   <li><a href="ressources_humaines/liste_option_photographie.php">Gestion des options photos</a></li>
   <li><a href="ressources_humaines/liste_remerciement.php">Gestion des remerciements</a></li>
   <li><a href="ressources_humaines/liste_partenaire.php">Gestion des partenaires</a></li>
</ul>
</li>
<li class="c"><a class="ch" href="contact.php">Contact</a></li>
</ul>

</div>
</div>
<div class="espace">
<form method="post" action="index/verif.php" id="">
<fieldset><legend>Veuillez vous identifiez administrateur</legend><div class="center2"><label for="login_admin">Login :</label> <input type="text" name="login_admin" id="login_admin" /><br/>
<label for="mot_de_passe_admin"> Mot de passe :</label> <input type="password" name="mot_de_passe_admin" id="mot_de_passe_admin" /><br/>
<p><input type="image" value="Envoyer"  src="images/b_valider.gif" /></p><p class="couleur gras"><?php
if(!isset($_SESSION['connecte'])){
if (isset($_GET['error']))	{ echo $_GET['error']; }}?></p></fieldset></form>


</div>

</div>
</body>
</html>

CSS :


body 
{
background-color: #fcfcf6;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
margin-left:auto;
margin-right:auto;
width:980px;
}

#conteneur
{
width:980px;
border:1px solid #81110f;
margin-top:26px;
z-index:10;
}

.bandeau
{
width:980px;
}

#bandeau
{

}

#menu
{
width:980px ;
background:black;
height:22px;
}

label 
{
display:block;
width:225px;
float:left;
text-align:right;
margin-right:10px;
color:#81110f;
}

legend
{
color:#81110f;
}

.center
{
width:75%;
margin-left:auto;
margin-right:auto;
}

.center2
{
width:50%;
margin-left:auto;
margin-right:auto;
}

.espace
{
margin-top:50px;
margin-bottom:50px;

}

fieldset
{
border-color:silver;

/*background-image:url(../images/bandeau.jpg);*/
}

.align 
{
padding-top:2px;
}

.black
{
color:black;
}

.liste_fonctions
{
width:980px;
margin-left:auto;
margin-right:auto;
border:2px solid #81110f;
margin-top:25px;
text-align:center;
}
.fonctions
{
text-decoration:none;
color:#81110f;
font-size:1.2em;
font-weight:bold;
}
.fonctions:hover
{
text-decoration:none;
color:grey;
font-size:1.2em;
font-weight:bold;
}
.photo
{
list-style-type:none;

 	background-image:url(../images/photo.jpg);

 	background-repeat:no-repeat;

 	background-position:36% 70%;
	height:25px;
	
	margin-top:25px;
	padding-top:10px;
 	padding-left:20px;
	
}

.camera
{
list-style-type:none;

 	background-image:url(../images/camera.png);

 	background-repeat:no-repeat;

 	background-position:36% 70%;
	height:30px;
	
	margin-top:25px;
	padding-top:10px;
 	padding-left:20px;
}

.livre
{
list-style-type:none;

 	background-image:url(../images/livre.jpg);

 	background-repeat:no-repeat;

 	background-position:30% 70%;
	height:30px;
	
	margin-top:25px;
	padding-top:10px;
 	padding-left:28px;
}
.camera2
{
list-style-type:none;

 	background-image:url(../images/camera.png);

 	background-repeat:no-repeat;

 	background-position:36% 70%;
	height:30px;
	
	margin-top:25px;
	padding-top:10px;
 	padding-left:66px;
}

.mariage
{
list-style-type:none;

 	background-image:url(../images/mariage.png);

 	background-repeat:no-repeat;

 	background-position:43% 0%;
	height:50px;
	
	margin-top:25px;
	padding-top:10px;
 	padding-left:28px;
}

.mariage2
{
list-style-type:none;

 	background-image:url(../images/mariage.png);

 	background-repeat:no-repeat;

 	background-position:41% 0%;
	height:50px;
	
	margin-top:25px;
	padding-top:10px;
 	padding-left:28px;
}

/*.liens
{
width:100%;
margin-left:auto;
margin-right:auto;
color:white;
text-decoration:none;
margin-left:5%;
margin-right:5%;
}
*/
.liens
{color:silver;
}

.liens:hover
{
color:yellow;
/*color:#81110f;*/
}

h2,h3,h1,h4
{
background-color:#81110f;
color:white;
text-align:center;
}

p
{
color:#81110f;
}

.gras
{
font-weight:bold;
}

.milieu
{
text-align:center;
}

.center h2,table,p,h1
{
margin-left:auto;
margin-right:auto;
width:70%;
height:auto;
text-align:center;
margin-bottom:35px;
}


h3
{
width:50%;
text-align:center;
margin-left:auto;
margin-right:auto;
height:auto;
}
h4
{
width:40%;
text-align:center;
margin-left:auto;
margin-right:auto;
height:auto;
}

.up
{
margin-top:25px;
}

.right
{
text-align:right;
}

.left
{
text-align:left;
}

.petio
{
width:75%;
}

input[readonly="readonly"]
{
background:#81110f;
color:white;

text-align:center;
}

#menu {
list-style: none ;
margin: 0 ;
padding: 0 ;


}

#menu li{
display: inline ;
padding : 0 5em;

width:auto;
font-weight:bold;
}

.rien
{
border:0px;
}

#menu ul li ul {
display: none ;

}
#menu ul li ul li
{
padding:0;
}

#menu ul .a:hover ul  {
display:block;
position:relative;
top:-15px;
left:215px;
width:145px;
background:black;
z-index:10;
line-height:0;
padding:0;
margin:0;
text-align:center;
}



#menu ul .b:hover .deu{
display:block;
position:relative;
top:-15px;
left:475px;
width:210px;
background:black;
z-index:10;
text-align:center;
line-height:0;
padding:0;
margin:0;

}


#menu li a {
font: 1.1em Arial,sans-serif ;
line-height:1.8em;

text-decoration: none ;
color:red;
font-weight:bold;
}

#menu li a:hover, #menu li a:focus, #menu li a:active {
color:yellow;
}

.marge
{
margin-top:75px;
}
.couleur
{
color:#81110f;
}

.calendrier
{
position:relative;
top:7px;

}

.ch
{
position:relative;
top:-17px;
line-height:1.8em;
color:white;
}
.ch2
{
position:relative;
top:-17px;
line-height:1.8em;
color:white;
}


.modif
{
margin-left:58px;
}
.modif2
{
margin-left:11px;
}
.modif3
{
margin-left:28px;
}
.red
{
color:black;
}
.red2
{
color:red;
}
.decal
{
position:relative;
top:7px;
}

#lien_suivant
{
position:relative;
top:3px;
}
.center50
{
position:relative;
margin-left:350px;
margin-right:350px;
margin-top:25px;
margin-bottom:25px;
}

.details
{
text-decoration:none;
color:#81110f;
}
.none
{
font-weight:normal;
}

merci d'avance

Sujet clos

CSS et mise en forme, CSS3

Pb de menu déroulant help !!